javascript - 如何在纯Javascript中进行无限滚动

Question

为了保持我的代码最少，我想避免使用 jQuery 或其他库，我需要很少的功能，我只想在用户滚动到底部时附加到列表中。我将如何用纯 Javascript 做到这一点？

score 16 · Accepted Answer

基本上，您只需要挂钩事件滚动，检查用户是否向下滚动足够多，如果是，则添加一些内容：

<html><body>
<div id="test">scroll to understand</div>
<div id="wrapper" style="height: 400px; overflow: auto;">
  <div id="content"> </div>
</div>

<script language="JavaScript">
  // we will add this content, replace for anything you want to add
  var more = '<div style="height: 1000px; background: #EEE;"></div>';

  var wrapper = document.getElementById("wrapper");
  var content = document.getElementById("content");
  var test = document.getElementById("test");
  content.innerHTML = more;

  // cross browser addEvent, today you can safely use just addEventListener
  function addEvent(obj,ev,fn) {
    if(obj.addEventListener) obj.addEventListener(ev,fn,false);
    else if(obj.attachEvent) obj.attachEvent("on"+ev,fn);    
  }

  // this is the scroll event handler
  function scroller() {
    // print relevant scroll info
    test.innerHTML = wrapper.scrollTop+"+"+wrapper.offsetHeight+"+100>"+content.offsetHeight;

    // add more contents if user scrolled down enough
    if(wrapper.scrollTop+wrapper.offsetHeight+100>content.offsetHeight) {
      content.innerHTML+= more;
    }
  }

  // hook the scroll handler to scroll event
  addEvent(wrapper,"scroll",scroller);
</script>
</body></html>

score 5 · Accepted Answer

无限滚动的优秀演示代码。表明您不需要 jQuery 和 Angular 来进行任何独立于浏览器的工作。但是今天的新人与我们老家伙仍然信任和使用的纯 Javascript 脱节了。在这里，我进一步简化了代码：

// we will add this content, replace for anything you want to add
var wrapper, content, test;
var more = '<div style="height:1000px; background:#EEE;"></div>';

// this is the scroll event handler
function scroller() {
  // print relevant scroll info
  test.innerHTML = wrapper.scrollTop + " + " + wrapper.offsetHeight + " + 100 > " + content.offsetHeight;

  // add more contents if user scrolled down enough
  if (wrapper.scrollTop + wrapper.offsetHeight + 100 > content.offsetHeight) {
    content.innerHTML += more; // NK: Here you can make an Ajax call and fetch content to append to content.innerHTML
  }
}

wrapper = document.getElementById("wrapper");
content = document.getElementById("content");
test = document.getElementById("test");

content.innerHTML = more;

// hook the scroll handler to scroll event
if (wrapper.addEventListener) // NK: Works on all new browsers
  wrapper.addEventListener("scroll", scroller, false);

else if (wrapper.attachEvent) // NK: Works on old IE
  wrapper.attachEvent("onscroll", scroller);

<div id="test">scroll to understand</div>

<div id="wrapper" style="height: 400px; overflow: auto;">
  <div id="content"> </div>
</div>

score 4 · Accepted Answer

要实现此行为，您不需要 jQuery 或 jQuery 插件。您只能使用 CSS 或 JavaScript（如果您想覆盖所有浏览器）。

但是不要使用onScroll：您可以使用 vanilla JS 和Intersection Observer API来完成所有这些操作。

您需要做的就是放置元素并在它们出现在屏幕上时进行监听。Intersection Observer API 非常可定制，可以满足您的所有需求。

总而言之：您只需几行 JavaScript 和 HTML 代码就可以做到这一点，而且它比在浏览器中监听滚动事件的性能要高得多。

score 1 · Accepted Answer

domElem.addEventListener(
        'scroll',
        function(evt) { ... },
        false
    );

并适当地处理 evt/scroll 位置。

score 0 · Accepted Answer

我看到你的问题的好答案，但是对于与任何 HTML 元素或内容（只是一个空的 HTML 页面）无关的滚动，我是这样做的：

document.querySelector("body").style.height = "1000px";

window.addEventListener("scroll", function() {
    var body = document.querySelector("body");
    var height = body.style.height;
    height = height.slice(0, -2);
    height = Number(height);
    return function() {
        if(height - window.scrollY < 700) {
            height += height / 2;
        }
        body.style.height = height + "px";
    };
}());

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

我希望这可以帮助那里的人:)

score 0 · Accepted Answer

假设 HTML：

<div class="container"></div>

let container = document.querySelector('.container');

// when user scrolls to last list item in view, wait for 1.5seconds and load next 10 list items, and continue thus.
window.addEventListener('scroll', function(){
  setTimeout(() => {
    loadMoreList(5);
  }, 1500);
});

loadMoreList(20); // load first 20 list items.

function loadMoreList(num) {
  let scrollY = window.scrollY;
  let innerHeight = window.innerHeight;
  let offsetHeight = document.body.offsetHeight;
  
  if (scrollY + innerHeight > offsetHeight - 100) {
    let item = 1;
    let ul = document.createElement('ul');
    
    for (var i = 0; i < num; i++) {
      let li = document.createElement('li');
      li.innerText = 'List Item ' + item++;

      ul.appendChild(li);
      container.appendChild(ul);
    }
  }
}

注意：比较重要的部分是：滚动事件监听器和loadMoreList函数。您不一定需要参数num。for 循环只是确保在加载时调用该函数并唯一地创建和显示 20
个项目。

score -1 · Accepted Answer

具有跨浏览器支持的示例片段：Read inline comments for how it works

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
       //User is currently at the bottom of the page
        addNewItem();
    }
};


function addNewItem(){
   var itemCount = document.getElementById("movieList").childElementCount;
const itemLimit = 10; //total number of items to retrieve
//retrieve the next list of items from wherever
var nextTopItems = getNextItemSimulator(itemCount); 
nextTopItems.forEach(function(item) {
//add the items to your view
  document.getElementById("movieList").innerHTML += "<p>"+item+"</p>"; 
     document.getElementById("footer").style.display = "block";
});
setTimeout(function(){
     //remove footer info message
     document.getElementById("footer").style.display = "none";}, 500);
}

function getNextItemSimulator(currentItem){ 
   //Just some dummy data to simulate an api response
const dummyItemCount = 50;
var dummyItems = []; 
var nextTopDummyItems = [];
for(i = 1; i <= dummyItemCount; i++){
//add to main dummy list
    dummyItems.push("Movie " + i);
}
var countTen = 10;
var nextItem = currentItem + 1;
for(i = nextItem; i <= dummyItems.length; i++){
    //get next 10 records from dummy list
    nextTopDummyItems.push(dummyItems[i - 1]);
    countTen--;
    if(countTen == 0)break;
}
   return nextTopDummyItems;
}

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    display:none;
    background: #eee;
}

#movieList{
margin-bottom: 20px;
}

<h3> Movies 2019 </h3>

<div id="movieList">
<p>Movie 1</p>
<p>Movie 2</p>
<p>Movie 3</p>
<p>Movie 4</p>
<p>Movie 5</p>
<p>Movie 6</p>
<p>Movie 7</p>
<p>Movie 8</p>
<p>Movie 9</p>
<p>Movie 10</p>
</div>
<div id="footer">Loading more movies</div>

javascript - 如何在纯Javascript中进行无限滚动

7 回答 7

Related

Reference