如何讓用戶連續滾動列表？

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>