Question

我有一个带有滚动溢出的div容器。它包含许多子元素，它们像列表一样滚动。一旦用户一直滚动到底部，我希望列表的顶部项目从底部重新出现，就像它是一个连续的，无限的列表但具有相同的项目。

原因是该列表包含一旦链接位于页面垂直中心就会突出显示的链接。我想要一个无休止的列表，以便突出显示所有项目。

我找不到任何有助于我的案例的例子或参考资料。任何帮助将受到高度赞赏：）

Answer 1

我不认为有一种开箱即用的方式可以用纯JS做到这一点（我也没有听说过任何这样的库）。

但是，您可以手动收听onscroll事件，然后计算必须删除顶部的哪些元素，并通过container.appendChild()和container.removeChild()将其附加到列表底部。

Answer 2

你可以试试这个。

<div class="Parent-Wrapper">
<div class="Child-Wrapper">
 <a href="">Link 1</a>
 <a href="">Link 2</a>
 <a href="">Link 3</a>
 <a href="">Link 4</a>
</div>
<div class="Child-Wrapper">
 <a href="">Link 5</a>
 <a href="">Link 6</a>
 <a href="">Link 7</a>
 <a href="">Link 8</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
setInterval(function(){
var FirstChildDiv  = $('.Child-Wrapper:eq(1)').html();
//Remove First Element
$('.Child-Wrapper:eq(1)').remove();
//Append Removed Element To Next Occuring In Parent Div
$('.Parent-Wrapper').append(FirstChildDiv);
// Thats It.
},5000);
});
</script>

如何让用户连续滚动列表？

2 个答案: