首先是页面层

要有一个可视化的外层盒子高度定死，内层盒子高度自适应 并使用绝对定位，外层盒子使用overflow: hidden内容超出隐藏 并使用相对定位。

function scrollAnimation() {
  // 首先要获取外层盒子的高度
  let wrapHeight = $('.wrap-box').outerHeight();
  // 再获取内层盒子高度
  let boxHeight = $('.main-box').outerHeight();
  // 再拿内层盒子高度减去外层盒子高度得出要定位移动的位置
  let totalHeight = boxHeight - wrapHeight;
  // 算出过度动画进行的时间
  let totalTime = Math.ceil(totalHeight / 20);
  // 得到动画的时间，和过度动画需要定位位置后，开始赋值css，当然赋值前要先清理一遍，防止无缝衔接障眼法被看穿
  $('.main-box').css({ 'transition': 'none', 'top': '0px' });
  // 这里使用个计时器，赋值要进行的动画
  setTimeout(_ => {
    $('.main-box').css({ 'transition': `all ${totalTime}s linear`, 'top': ${-totalHeight}px });
  }, 30)
  // 这里再新增个计时器，用来监视动画做完重新运行
  setTimeout(_ => {
    scrollAnimation()
  }, totalTime * 1000)
}

注意：数据赋值的时候看下外层盒子显示几个list，比如显示3个要把前三个数据填充到总数据的后面，以实现障眼法