Javascript scrolling Div loop

Question

I have the current script working, the div scrolls to the bottom and stays. I would like to have it start back at the top after it hits the bottom. Perhaps by looping? Although I have tried several techniques using looping and delays and am unable to get it to work. When I did try to loop it, it appears to make the scroller faster and doesn't repeat?

JsFiddle for some reason doesn't animate: https://jsfiddle.net/tz4kjegf/8/

Here is the Code:

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>

This is my attempt at looping

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>

My attempt to use 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>

The while loop never increments i, so it's an infinite loop. — Barmar
– Barmar, Commented Oct 15, 2019 at 18:41
I did try that as well, with no luck. I do basically want it to have an infinite loop. Neither appear to work as it seems to interfere with the scrolling script — OblongMedulla
– OblongMedulla, Commented Oct 15, 2019 at 18:42
could you share a working jsfiddle maybe, I cant reproduce the working part from your code above on Run code snippet or jsfiddle — Uyiosa Enabulele
– Uyiosa Enabulele, Commented Oct 15, 2019 at 18:58
I dont think it works perhaps because its looking for the div inside of the jsfiddle- I am really not sure but it does not work on jsfiddle? jsfiddle.net/tz4kjegf — OblongMedulla
– OblongMedulla, Commented Oct 15, 2019 at 19:05

Uyiosa Enabulele · Accepted Answer · 2019-10-15 19:56:59Z

1

To achieve your loop, you need to check if the element is at the bottom and then reset the scrollTop which would mean setting the scrollTop to 0. you can add other implementation details after that.

Based on your code above,

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

here is a fiddle: https://jsfiddle.net/pw08cy6g/4/

edited Oct 15, 2019 at 19:56

answered Oct 15, 2019 at 19:48

Uyiosa Enabulele

1781 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

OblongMedulla Over a year ago

is there anyway to ease the transition up? with a delay or?

Collectives™ on Stack Overflow

Javascript scrolling Div loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related