div 自动上下滚动效果

今天有一个需求要实现数据列表滚动展示，就在网上查了查相关资料，复制下来后功能实现了，但是还存在一个小bug，就是由于div的滚动的距离是随着内容动态变化的，所以有时候会出现滚动到最下边后不能反向循环滚动了，研究代码后发现了一个问题，就是判断滚动条是否滚动到底的逻辑有问题，所以在此记录下。

总体思路：就是通过interval()函数不断改变滚动条(scrollTop)的位置。

我的代码：

        功能代码：加粗字体是我为解决滚动到最下边后不能反向循环滚动问题加的

/**
 * stepLength：一次滚动步长
 * speed：滚动速度
 * delay：停留时间
 * element：Element对象
 * element.offsetHeight 元素的像素高度（包括边框和填充）
 * element.scrollTop 元素的内容垂直滚动的像素
 * element.scrollHeight 元素的高度（包括带滚动条的隐蔽的地方）
 */
function autoScroll(stepLength, speed, delay, element) {
    let interval
    let step = 1
    element.scrollTop = 0
 
    function start() {
        interval = setInterval(scrolling, speed)
        element.scrollTop += step
    }
      
    function scrolling() {
        if (element.scrollTop % stepLength !== 0 && element.scrollTop === (element.scrollHeight - element.offsetHeight) {
          element.scrollTop += 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)
    }
}

        调用：autoScroll(55, 20, 1500, document.getElementById('xxx'))；