如何使用 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 example

我如何做这样的无限滚动，但用 js 置顶？

Answer 1

使用$ol.scrollTop === 0，您可以检查ol 是否滚动到顶部。 scollTop 在最高位置时始终为 0。

还更改了 loadMore 函数，因此它将新元素附加到带有 $ol.prepend(document.createElement('li')) 的元素的开头

最后我在 loadmore 函数中添加了$ol.scrollTop = firstEl.offsetTop; 以自动滚动到之前是第一个元素的元素。

我反转了您的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>