Creating an infinite scroll loop with div contents

Question

So I would like to make an infinite loop of all the items in a <div>, where the overflow has been set to auto.

It should work so that whenever you reach towards the end of the <div>, the top most content appears again, and continues so on in an infinte scrolling loop.

Is there any way of doing this with Javascript and CSS only...

Here is my project: https://jsfiddle.net/RutRock/hb6y3ead/5/ (Not everything works but its the small widgets on the right side).

Here is the <div> (circled in red) that needs to be looped.

Answer 1

You can use the window.scrollY property and check if it is close to the height of the infinite scrolling element. Then, you insertAdjacentHTML into the infinite scroll after having saved the elements original innerHTML into a variable. Frankly, I've never done this myself but it seems like a good solution.