div 滚动条自动滚动

css

滚动条样式，将滚动条隐藏

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

.cal_bottom::-webkit-scrollbar {/*滚动条整体样式*/     width:0.5px;/*高宽分别对应横竖滚动条的尺寸*/     height:4px;     }           .cal_bottom::-webkit-scrollbar-thumb {/*滚动条里面小方块*/      border-radius:5px;     -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);      /* background:rgba(0,0,0,0.2);  */     background: #051655;     }           .cal_bottom::-webkit-scrollbar-track {/*滚动条里面轨道*/     -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);     border-radius:0;     /* background:rgba(0,0,0,0.1); */     background:#051655;     }

　　

html

?

1 2	<div class="cal_bottom" style="height:89%;overflow:hidden;margin-top:2%" id="gridtablejw"><br>             </div>

js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

//用JS添加数据      var data = [         { "Img": "img/police/nan.jpg", "code": "赵鹏", "CreateTime": "2022-06-30" },         { "Img": "img/police/nv.jpg", "code": "王晴", "CreateTime": "2022-06-30" },         { "Img": "img/police/nan.jpg", "code": "李立", "CreateTime": "2022-06-30" },         { "Img": "img/police/nv.jpg", "code": "夏雨", "CreateTime": "2022-06-30" },         { "Img": "img/police/nan.jpg", "code": "柳树", "CreateTime": "2022-06-30" },         { "Img": "img/police/nv.jpg", "code": "赵砚", "CreateTime": "2022-06-30" },         { "Img": "img/police/nan.jpg", "code": "王三小", "CreateTime": "2022-06-30" },         { "Img": "img/police/nv.jpg", "code": "王三一", "CreateTime": "2022-06-30" }     ];     var _html = "";          for (var i = 0; i < data.length; i++) {         _html += "<div class='policediv' id='test'>" +             "<div style='width:20%;left:1%;margin-top:1%;float:left'>" +             "<img src='" + data[i].Img + "' style='width:40%;height:6%;'/>" +             "</div>" +             "<div style='width:75%;font-size:14px;margin-top:1%;float:right'>" +             "<p>"             + "<label class='cbInput'>" + data[i].code + "</label>"             + "<label class='cbInput'>" + data[i].CreateTime + "</label>"             + "</p>" +             "</div>" +             "</div>"     }     $("#gridtablejw").html(_html);

　实现自动滚动，js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

//加载  $(function (){      var element = document.getElementById('gridtablejw')       autoScroll(37, 150, 1000, element) })function autoScroll(stepLength, speed, delay, element) {             let interval;             let step = 1;             function start() {                 console.log("2：" + element.scrollTop + "====" + speed);                 interval = setInterval(scrolling, speed)                 element.scrollTop += step             }             function scrolling() {                 if (element.scrollTop % stepLength !== 0) {                     element.scrollTop += step                     console.log("1：" + element.scrollTop + "====" + stepLength + "===========" + step);                 } else {                     if (element.scrollTop === 0 || element.scrollTop === (element.scrollHeight - element.offsetHeight)) { // 触顶或触底                         step *= -1 // 转换方向                     }                     clearInterval(interval)                     setTimeout(start, delay)                 }             }             if (element.offsetHeight !== element.scrollHeight) { // 元素内容没有溢出时，不触发                 setTimeout(start, delay)             }         }

/**
* stepLength：一次滚动步长
* speed：滚动速度
* delay：停留时间
* element：Element对象
* element.offsetHeight 元素的像素高度（包括边框和填充）
* element.scrollTop 元素的内容垂直滚动的像素
* element.scrollHeight 元素的高度（包括带滚动条的隐蔽的地方）
*/