最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Continuous looping scroll (no jQuery) - Stack Overflow

programmeradmin0浏览0评论

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!

Share Improve this question edited Jan 30, 2018 at 22:24 hungerstar 21.7k6 gold badges51 silver badges62 bronze badges asked Jan 30, 2018 at 22:22 abbas_arezooabbas_arezoo 1,0783 gold badges22 silver badges40 bronze badges 5
  • 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
Add a ment  | 

1 Answer 1

Reset to default 6

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

发布评论

评论列表(0)

  1. 暂无评论