div 自动上下滚动特效

话不多说，直接上代码！

/**
 * 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 += 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)
    }
}

// 调用
const element = document.getElementById('xxx')
autoScroll(55, 20, 1500, element)

如图，效果是每次向下滚动一格，触底后，每次向上滚动一格，不断循环

 

注：stepLength 设置成一格的高度，element.offsetHeight 设置成 n 格高度之和，可达到最佳效果