CODEWITHSUNDEEP
javascriptjqueryhtml
OblongMedulla
OblongMedulla

Reputation: 1595

Javascript scrolling Div loop

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>

Upvotes: 2

Views: 1296

Answers (1)

Uyiosa Enabulele
Uyiosa Enabulele

Reputation: 178

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/

Upvotes: 1

Related Questions