90行代码，15个元素实现无限滚动，没有你想象的那么难

前端

2023-11-28 13:00:41

90行代码，15个元素实现无限滚动

前言

无限滚动是一种允许用户在大量成块的内容面前一直滚动查看的技术。这种方法是在你向下滚动的时候不断加载新内容。

当你在使用滚动作为触发器加载新内容时，这种技术非常有用。例如，当你在浏览社交媒体页面时，当你到达页面底部时，它会自动加载更多帖子。

实现步骤

创建 HTML 结构

首先，我们需要创建一个 HTML 结构来容纳我们的无限滚动列表。这个结构非常简单，只需要一个 <div> 元素和一个 <ul> 元素即可。

<div id="container">
  <ul id="list"></ul>
</div>

添加 JavaScript 代码

接下来，我们需要添加 JavaScript 代码来实现无限滚动。我们将使用 IntersectionObserver API 来检测何时滚动到列表的底部，然后使用 Ajax 来加载新内容。

const container = document.getElementById('container');
const list = document.getElementById('list');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMoreItems();
    }
  });
}, {
  root: container,
  threshold: 0
});

observer.observe(list);

function loadMoreItems() {
  // 这里是用Ajax加载新内容的代码
}

添加 CSS 样式

最后，我们需要添加 CSS 样式来对列表进行美化。

#container {
  height: 100vh;
  overflow: auto;
}

#list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#list li {
  padding: 10px;
  margin-bottom: 10px;
  background-color: #eee;
}