如何使用js使Infinite Scroll達到頂峰？

Question

有一個無限滾動到底部的例子。

  var $ol = document.querySelector("ol"); function load_more() { var html = ""; for (var i = 0; i < 5; i++) html += '<li></li>'; $ol.innerHTML += html; } $ol.addEventListener("scroll", function() { if ($ol.scrollHeight - $ol.scrollTop === $ol.clientHeight) load_more(); }); 

  <ol> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> 

有一個jsfiddle的例子

我如何制作這樣的無限卷軸，但最重要的是js？

Answer 1

使用$ol.scrollTop === 0您可以檢查ol是否滾動到頂部。 scollTop在最高位置時始終為0。

還更改了loadMore函數，因此它使用$ol.prepend(document.createElement('li'))將新元素追加到元素的開頭。

最后我添加了$ol.scrollTop = firstEl.offsetTop; 在loadmore函數中自動滾動到以前第一個元素的元素。

我顛倒了你的OL所以更容易看到新項目被加載。 當然，這不是必需的。

 var $ol = document.querySelector("ol"); //Call this function onload so new content gets loaded and scrolling upwards become available. load_more(); //Add event listner that triggers function when the element is scrolled to the top. $ol.addEventListener("scroll", function() { if ($ol.scrollTop === 0) load_more(); }); //Load more items. function load_more() { //Get the current first element. var firstEl = $ol.firstElementChild; //prepend the new elements. for (var i = 0; i < 5; i++) { $ol.prepend(document.createElement('li')) } //scroll to the previous first element. $ol.scrollTop = firstEl.offsetTop; } 

 ol { height: 100px; overflow: scroll; } 

 <ol reversed> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol>