滚动条自动滚动

效果图： 指定区域实现定时自动滚动(页面滑动)

（右侧教室动态滑动效果）

 1、scrollTop属性是什么?

有些情况下,“元素中内容”的高度会超过“元素本身”的高度, scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度。

例如：外层元素的高度值是200px,内层元素的高度值是300px。很明显，“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有部分内容会隐没在“外层元素的上边界”之外，scrollTop就等于这部分“不可见的内容”的高度。

 

代码实现：

两种都实现了自动滚动；区别在与判断滚动条是否滚动到底部时判断的依据不同

第一种：

/**滚动条自动滚动 */
function roomdetailscroll() {
    var parent, parent;
    // 获取父盒子（肯定有滚动条）
    parent = document.getElementById('roomdetaildiv');
    // 获取子盒子（高度肯定比父盒子大）
    child = document.getElementById('roomlist');
    //divh是可视区的高度(就是父盒子的高度)
    var divh = $("#t2_left").height();

    // 设置定时器，时间即为滚动速度
    r = setInterval(function () {
        //滚动条距顶部高度+可视区高度 、parent.scrollHeight是滚动条的总高度
        if (Math.ceil(parent.scrollTop + divh) >= Math.ceil(parent.scrollHeight)) {
            parent.scrollTop = 0;
            clearInterval(r);
            roomdetailscroll();
        } else {
            ////scrollTop是滚动条滚动时，距离顶部的距离
            parent.scrollTop = parent.scrollTop++;
        }
    }, 1000);
}

 第二种：

/**滚动条滚动 */
function roomstatescroll() {
    //child = document.getElementById('ecc_table_body');
    //divh是可视区的高度
    var divh = $("#usdatetablediv").height();
    // 设置定时器，时间即为滚动速度
    c = setInterval(function () {
        // 获取父盒子（肯定有滚动条）
        var parent = document.getElementById('usdatetablediv');
        // 获取子盒子（高度肯定比父盒子大）
        var child = $("#usdatetable").height();

        //滚动条距顶部高度
        if (Math.ceil(parent.scrollTop + divh) >= Math.ceil(child)) {
            parent.scrollTop = 0;
            clearInterval(c);
            roomstatescroll();
        } else {
            ////scrollTop是滚动条滚动时，距离顶部的距离
            parent.scrollTop++;
            //console.error(Math.ceil(child))
            //console.error(Math.ceil(parent.scrollTop + divh))
        }
    }, 1000);
}

 

 参考文献：

https://blog.csdn.net/gang_gang_gang/article/details/4233044

https://blog.csdn.net/amdd9582/article/details/87738821#:~:text=js%E9%83%A8%E5%88%86%E5%BE%88%E7%AE%80%E5%8D%95%EF%BC%9A%E9%80%9A%E8%BF%87%E6%8E%A7%E5%88%B6scrollTop%E7%9A%84%E5%80%BC%E6%9D%A5%E5%AE%9E%E7%8E%B0%E8%87%AA%E5%8A%A8%E6%BB%9A%E5%8A%A8%E6%95%88%E6%9E%9C%EF%BC%9B%20%E5%BE%88%E9%87%8D%E8%A6%81%E4%B8%A4%E7%82%B9%EF%BC%9A,1%E3%80%81scrollTop%E7%9A%84%E5%80%BC%E4%B8%8D%E5%8F%AF%E4%BB%A5%E5%8A%A0%E5%8D%95%E4%BD%8D%EF%BC%8C%E8%B0%A8%E8%AE%B0%EF%BC%81%202%E3%80%81%E7%BD%91%E9%A1%B5%E7%BC%A9%E6%94%BE%E6%AF%94%E4%BE%8B%E4%BC%9A%E5%BD%B1%E5%93%8D%E6%95%88%E6%9E%9C%E5%AE%9E%E7%8E%B0%EF%BC%88%E4%B8%8B%E9%9D%A2%E5%85%B7%E4%BD%93%E8%AF%B4%EF%BC%89%EF%BC%9B

https://www.jianshu.com/p/c464576a43e4