如何使js无限滚动至顶部？

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>