Continuous looping scroll (no jQuery)

Question

I'm wanting to add an continuous looping scroll to a list of text on page. So when the user gets to the last item of the list, the first item shows directly beneath as you scroll and so on. Scrolling up and down would be great. The scroll would be on the page rather than the parent container of the list.

I'm aware of the jQuery orientated solutions such as: Continuous Looping Page (Not Infinite Scroll), but was hoping to use a vanilla JS solution to dodge the performance overhead.

Here's example HTML:

<div class="wrapper">
  <ul class="loop">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <!-- THERE COULD BE LOTS OF LIST ITEMS -->
  </ul>
</div>

This pen seems to have the answer. However when I begin to strip out the styles and replace with own the scroll stops working. I'd like this scroll to not be reliant on any decorative elements if possible.

I have a pen set up here: https://codepen.io/abbasarezoo/pen/pavxVd

Thanks in advance for any help!

Answer 1

Here's a solution!

Explanation:

It uses 2 elements to achieve your ask.

• The first loop element is cloned and they both are given position:absolute
• This way if the screen goes above offset to current loop element + 80% height of loop
• Then move the previous loop element above this height. Repeat!
• To make this work when going down, it deals with when scroll height is less than offset to current loop element + 20% height of loop

Note: Since we are now dealing with going up and down, there is a little region between .8 loop1 < {scroll} < .2 loop2 where both conditions will be satisfied causing a lot of thrashing. The way to deal with that is keeping track of the previous scroll value, so you can ascertain the direction of scroll. Using this we know exactly if we want to renderNext or renderPrev