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:

Thanks in advance for any help!

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!

• javascript
• html
• css
• scroll

• You haven't added any javascript to your version – Ibu Commented Jan 30, 2018 at 22:28
• The tricky thing with offsets is factoring in padding/margins/borders, and getting the scrolling smooth - the rest is pretty straightforward. What exactly are you having an issue with? – mhodges Commented Jan 30, 2018 at 22:29
• 1 First google result looks promising: codepen.io/vincentorback/pen/zxRyzj – doppler Commented Jan 30, 2018 at 22:31
• @doppl3r Yeah I refer to that in my question. It looks like the answer, but when you begin to strip away the styles it's stops looping. – abbas_arezoo Commented Jan 31, 2018 at 10:02
• @mhodges The issue i'm having is the vanilla JS solution i've linked to in the question is that it breaks once you begin stripping out the CSS. So the solution is reliant on particular styled elements. The jQuery solution I also refer to does the job, but I was looking for a vanilla solution to avoid the performance hit. – abbas_arezoo Commented Jan 31, 2018 at 10:31

1 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