Question

我想在页面上添加一个连续循环滚动到文本列表。因此，当用户到达列表的最后一项时，第一项在滚动时直接显示在下面，依此类推。向上和向下滚动会很棒。滚动将位于页面上，而不是列表的父容器。

我知道面向jQuery的解决方案，例如：Continuous Looping Page (Not Infinite Scroll)，但希望使用一个普通的JS解决方案来避免性能开销。

以下是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似乎有答案。然而，当我开始剥离样式并替换为自己时，滚动停止工作。如果可能的话，我希望这个卷轴不依赖于任何装饰元素。

我在这里设置了一支笔：https://codepen.io/abbasarezoo/pen/pavxVd

提前感谢您的帮助！

Answer 1

Here's a solution!

说明：

它使用2个元素来实现你的要求。

克隆第一个循环元素，并且它们都被赋予position:absolute
这种方式，如果屏幕高于 offset to current loop element + 80% height of loop
然后将上一个循环元素移动到此高度之上。重复！
要在停止时使其工作，它会处理滚动高度小于 offset to current loop element + 20% height of loop

注意： 由于我们现在处理的是上升和下降，.8 loop1 < {scroll} < .2 loop2之间会有一个小区域，其中两个条件都会满足引起很多颠簸。处理它的方法是跟踪前一个滚动值，以便您可以确定滚动的方向。使用此功能，我们确切地知道我们是否要renderNext或renderPrev

连续循环滚动（没有jQuery）

1 个答案:

Here's a solution!

说明：