Javascript 滚动 Div 循环

Question

我让当前脚本正常工作，div 滚动到底部并保持不变。我想让它在触底后从顶部开始。也许通过循环？虽然我已经尝试了几种使用循环和延迟的技术，但无法让它发挥作用。当我确实尝试循环它时，它似乎使滚动条更快并且不重复？

JsFiddle 由于某种原因没有动画:https://jsfiddle.net/tz4kjegf/8/

代码如下:

var scrollDistancePerSecond = 30; // Scroll 50px every second.
var scrollDistancePerAnimationFrame = Math.ceil(scrollDistancePerSecond  / 60); // Animate at 60 fps.
var wrapper = document.getElementById('ph0');
	autoScroll(wrapper);	

function autoScroll(element){
    if (element.scrollTop < element.scrollHeight)
		
      window.requestAnimationFrame(autoScroll.bind(null,element));
      element.scrollTop += scrollDistancePerAnimationFrame;
}

	<div  id="ph0" style="width:888px;height:582px;left:197px;top:155px;z-index:0;position:absolute;overflow-x:hidden;overflow-y: hidden;"><ul id="events-past">Test1</ul><ul id="events-upcoming">Test2</ul></div>

这是我循环的尝试

var scrollDistancePerSecond = 30; // Scroll 50px every second.
var scrollDistancePerAnimationFrame = Math.ceil(scrollDistancePerSecond  / 60); // Animate at 60 fps.
var wrapper = document.getElementById('ph0');
	autoScroll(wrapper);	

while (i < 10) {
  function autoScroll(element){
    if (element.scrollTop < element.scrollHeight)
		
      window.requestAnimationFrame(autoScroll.bind(null,element));
      element.scrollTop += scrollDistancePerAnimationFrame;
}
  i++;
}

	<div  id="ph0" style="width:888px;height:582px;left:197px;top:155px;z-index:0;position:absolute;overflow-x:hidden;overflow-y: hidden;"><ul id="events-past">test1</ul><ul id="events-upcoming">test2</ul></div>

我尝试使用 setinterval:

var myVar = setInterval(autoScroll, 1000);

var scrollDistancePerSecond = 30; // Scroll 50px every second.
var scrollDistancePerAnimationFrame = Math.ceil(scrollDistancePerSecond  / 60); // Animate at 60 fps.
var wrapper = document.getElementById('ph0');
	autoScroll(wrapper);	

function autoScroll(element){
    if (element.scrollTop < element.scrollHeight)
		
      window.requestAnimationFrame(autoScroll.bind(null,element));
      element.scrollTop += scrollDistancePerAnimationFrame;
}

	<div  id="ph0" style="width:888px;height:582px;left:197px;top:155px;z-index:0;position:absolute;overflow-x:hidden;overflow-y: hidden;"><ul id="events-past"></ul><ul id="events-upcoming"></ul></div>

Answer 1

要实现循环，您需要检查元素是否位于底部，然后重置 scrollTop，这意味着将 scrollTop 设置为 0。之后您可以添加其他实现细节。

根据您上面的代码，

var scrollDistancePerSecond = 30; // Scroll 50px every second.
var scrollDistancePerAnimationFrame = Math.ceil(scrollDistancePerSecond  / 60); // Animate at 60 fps.
var wrapper = document.getElementById('ph0');
	autoScroll(wrapper);	

function autoScroll(element){
    if (element.scrollTop < element.scrollHeight)
		
      window.requestAnimationFrame(autoScroll.bind(null,element));
      
      // check if you are at the end of the scroll bar and reset
      if( element.scrollTop === (element.scrollHeight - element.offsetHeight)){
        element.scrollTop = 0
      }else{
        element.scrollTop += scrollDistancePerAnimationFrame;
      }
}

这是一个 fiddle :https://jsfiddle.net/pw08cy6g/4/