javascript - How do I make Infinite Scroll to top with js? - Stack Overflow

admin管理员组

文章数量:1387419

There is an example of infinite scroll to bottom.

  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>


  

There is an example of infinite scroll to bottom.

  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>


  

There is an jsfiddle example

How do I make infinite scroll like this but to top with js?

• javascript
• html
• css
• scroll

Share Improve this question Follow edited Aug 22, 2019 at 10:03 Charlene Vas 73111 gold badge1010 silver badges2222 bronze badges asked Aug 22, 2019 at 9:57 mr_blondmr_blond 1,73033 gold badges2727 silver badges5858 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

With $ol.scrollTop === 0 you can check if the ol is scrolled to the top. scollTop is always 0 when in the most upper position.

Also changed the loadMore function so it appends the new element to the start of the element with $ol.prepend(document.createElement('li'))

Last I added $ol.scrollTop = firstEl.offsetTop; in the loadmore function to automaticly scroll to the element that was previously the first element.

I reversed your OL so it's easier to see new items are loaded. This is not necessary of course.

var $ol = document.querySelector("ol");

//Call this function onload so new content gets loaded and scrolling upwards bee 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>

Another way to achieve this is through the use of IntersectionObserver.

const firstOptions = {
    threshold: 1,
    rootMargin: '100px'
}

const firstCardObserver = new IntersectionObserver((entries)=>{
    const firstCard  = entries[0]

    if(!firstCard.isIntersecting) return

    loadCardsAtStart()

    firstCardObserver.unobserve(firstCard.target)
    firstCardObserver.observe(document.querySelector('.card:first-child'))

}, firstOptions)

firstCardObserver.observe(document.querySelector('.card:first-child'))

The rootMargin here plays and important role as it prevents the cards from loading in an infinite loop.

Also, make sure you use prepend() inside your loadCardsAtStart() to insert the newly created cards at the top.

Refer to this video by WebDevSimplified in which he does the same thing but for infinite scroll to bottom.

本文标签： javascriptHow do I make Infinite Scroll to top with jsStack Overflow