通过自动滚动连续循环 div

Question

当页面加载下方的div时，我希望页面开始自动滚动并一遍又一遍地循环浏览内容。要查看我正在努力实现的示例，请转到此处

<div id="contentwrapper">
    <div class="post">some content</div>
    <div class="post">some content</div>
    <div class="post">some content</div>
    <div class="post">some content</div>
    <div class="post">some content</div>
    <div class="post">some content</div>
</div>

任何帮助将不胜感激，因为我几乎尝试了所有方法都没有成功。

Answer 1

可以通过设置 scrollTop 属性来更改元素的滚动位置。要持续更新它，您可以尝试：

var scrollDistancePerSecond = 50; // Scroll 50px every second.
var scrollDistancePerAnimationFrame = Math.ceil(scrollDistancePerSecond  / 60); // Animate at 60 fps.
var wrapper = document.getElementById('contentwrapper');
autoScroll(wrapper);
function autoScroll(element){
    if (element.scrollTop < element.scrollHeight)
      window.requestAnimationFrame(autoScroll.bind(null,element));
    element.scrollTop += scrollDistancePerAnimationFrame;
}

活生生的例子在这里。

至于连续循环，您可以将.post元素包装在内部包装器中（例如，<div id="inner-wrap"> .然后，您可以通过在外部包装器内附加内部包装元素的克隆来复制内容。

var innerWrap = document.getElementById('inner-wrap');
var clone = document.createElement('div');
clone.innerHTML = innerWrap.innerHTML;
wrapper.append(clone);

然后，在动画函数中，您可以检查包装器的scrollTop是否已达到innerWrap.scrollHeight。如果有，你可以跳回顶部！需要一些微调才能获得无缝效果。

更新

链接的页面不使用scrollTop，而是在包装<div>上对CSS转换translate3d的y组件进行动画处理。使用 CSS transition s 或 animation s 而不是 JavaScript，您可能会获得更高的性能结果。下面是纯 CSS3 中的一个例子。