连续循环滚动（无 jQuery）

Question

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

我知道面向 jQuery 的解决方案，例如：Continuous Looping Page (Not Infinite Scroll)，但希望使用 vanilla 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>

这支笔似乎有了答案。但是，当我开始剥离样式并用自己的样式替换时，滚动停止工作。如果可能的话，我希望这个卷轴不要依赖任何装饰元素。

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

在此先感谢您的帮助！

Answer 1

这是一个解决方案！

解释：

它使用 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