Javascript 通过自动滚动连续循环div

当一个页面加载下面的div时，我希望该页面开始自动滚动，并在内容中反复循环。看一个我想要达到的目标的例子

一些内容
一些内容
一些内容
一些内容
一些内容
一些内容

---

非常感谢您的帮助，因为我几乎尝试了所有方法，但都没有成功。

您可以通过设置

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;
}

然后，在动画函数中，您可以检查包装的

scrollTop

是否已达到

innerWrap.scrollHeight

。如果有，你可以跳回到顶端！需要进行一些微调才能获得无缝效果

更新

---

链接页面不使用scrollTop，而是在包装器

上设置CSS转换

translate3d

组件的

y

动画。使用CSS

transition

s或

animation

s而不是JavaScript，您可能会获得更高性能的结果。是纯CSS3中的一个例子。

对于许多用户来说，这将是一个恼人的体验。我完全同意Vohuman的观点，这将变得非常恼人。OP的问题我们没有上下文。这可能是某种“演示”功能，也可能是一个入职页面的背景效果。在很多情况下，效果都是合适的（而且很酷！）我尝试不使用克隆，我希望它只是将div位置设置为不停滚动。我感谢你的帮助@user45612318我很想知道这样的解决方案！如果你想要一个无缝的动画，我认为不可能避免克隆。如果你观看链接的页面，你会注意到当它一直滚动到底部时，它只是跳回顶部！没有使用克隆，而且绝对不是无缝的。我发布的答案，减去克隆，看起来很相似。我找到了克隆的解决方案，但是，我正在努力使用自动滚动功能，也许你可以看看并提供帮助？您的解决方案非常顺利，与我在答案更新部分链接的小提琴合并。请注意，我已将

translate3d

属性设置为75%的

y

坐标，因为克隆元素的重叠使剩余的25%变为75%。哦，您还忘了在

reCalc

函数中调用

requestAnimationFrame

——它必须是递归的，否则不会形成循环！谢谢，这正是我需要的！

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;
}

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