js用滚动条模拟横向时间轴

男娘i 2021-11-01 15:54 822阅读 0赞

1.  原理是通过设置时间轴盒子overflow-x: scroll;横向溢出的时候出现滚动条； (同理，制作纵向时间轴则设置overflow-y: scroll)
2.  在时间轴盒子外层再包裹一个固定大小的div，该盒子高度要比时间轴的盒子高度小20px，设置overflow:hidden，则可以隐藏掉时间轴盒子出现的滚动条;

css代码： .car-time-bar{ 
        width: 885px;
        height: 220px;
        margin: 22px 24px;
        padding: 0 16px;
        position: relative;
        overflow: hidden;
    }
    .car-time-bar-content{ 
        width: 885px;
        height: 240px;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
    }
    
    /* 时间轴左右两侧分别放置两个按钮 点击左划和点击右划 */
    .nv_lf{ 
        width: 16px;
        height: 22px;
        background: url("../img/time_bar_l.png") no-repeat;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -11px;
    }
    .nv_rt{ 
        width: 16px;
        height: 22px;
        background: url("../img/time_bar_r.png") no-repeat;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -11px;
    }

样式的部分不多赘述，每一份设计稿设计都不一致，主要是理解方法

时间轴滑动的原理是通过点击按钮控制滚动条滚动，使用setInterval模拟实现平滑滚动；  
js代码如下：