Javascript Looping Scroll for entire page

Question

I would like to create the following effect, but do not know if it is achievable the way I envisage.

I would like a html page that is 2 or 3 times bigger than the screen and is scrollable (in itself nothing special). But when you reach the bottom I want it to automatically go back to the top seemlessly.

The end result I would like is if you held down the down arrow button the page would keep looping and scrolling down.

I want it to be continuous, not just jump back up to the top and start over.

Maybe jQuery´s .clone() is what you are looking for: api.jquery.com/clone — joko13
– joko13, Commented Nov 9, 2012 at 22:12

Diodeus - James MacFarlane · Accepted Answer · 2012-11-09 22:15:37Z

1

You need to make a second copy of your contents and stick it after the original. When "frame one" of the second copy gets to the edge of the screen, reset the positioning back to zero. This way it appears to be like a seamless loop.

answered Nov 9, 2012 at 22:15

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

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

3 Comments

Somk Over a year ago

why not skip the second copy and just reset positioning back to zero at the maximum of the first copy? Also wont this jump and not be a smooth transition?

Diodeus - James MacFarlane Over a year ago

Imagine going right-to-left. One of four frames is visible. You slide to the third frame - so #3 slides left exposing #4. What happens next? There is no slide #5. So as #4 slides left - what do you see?

Vincent Orback Over a year ago

I’ve been looking around myself so I made a code example using this technique: codepen.io/vincentorback/pen/zxRyzj

Collectives™ on Stack Overflow

Javascript Looping Scroll for entire page

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related