How to add endless scroll to a website using Javascript

A modern web design technique involves creating a website with the illusion of endless scrolling, making it seem as if the page never ends. This engaging feature requires only a few lines of Javascript to implement. Rik is here to guide you through the process!

00:00 Intro
00:56 Cloning with Javascript
04:29 Scroll direction
11:15 CSS improvements
12:34 Outro

Links:

Demo:

Download:

Photo:

[pablocortes]

Cube for sure! thank you so much, SuperHi tutorials are the best!

[VictorGurov-oo]

A great tutorial, thank you! And of course: "Cube!" :)

[onion_]

@SuperHi I tried that and it did make it endless, but between each repeating section, there was an ugly space between them. How do you fix it?

[vennitrii--yt]

This comment probably won't be seen but it can't hurt to put it out there: this was working perfectly, up until `window` came into play, and it stopped working further. I'm trying to do this effect not for the entire page, but rather in a specific area that scrolls independently, so I think that's the issue. Unsure what to do, but I'll probably find an answer eventually

[allanbkristiansen]

Cube! ◻ A bit glitchy on mobile 🙃 Maybe a fix for this could be in another tutorial?