div 滚动条自动滚动

css

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

.cal_bottom::-webkit-scrollbar {/*滚动条整体样式*/
    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

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

            </div>

js

//用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='20%;left:1%;margin-top:1%;float:left'>" +
            "<img src='" + data[i].Img + "' style='40%;height:6%;'/>" +
            "</div>" +
            "<div style='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

//加载
 $(function (){
     var element = document.getElementById('gridtablejw')
      autoScroll(37, 150, 1000, element)
})

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

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)
            }
        }