Question

当页面加载下面的div时，我希望页面开始自动滚动并一遍又一遍地循环遍历内容。要查看我想要实现的目标的示例，请转到here

<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

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

scrollTop

直播示例here。

对于连续循环，您可以将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。如果有，你可以跳回到顶部！它需要一些微调才能获得无缝效果。

更新

链接页面不使用scrollTop，但会在包装器innerWrap.scrollHeight上设置CSS转换y的{{1}}组件的动画。使用CSS translate3d或<div>通过JavaScript可以获得更高效的结果。 Here是纯CSS3中的一个示例。

循环通过div连续w /自动滚动

1 个答案:

更新