这种无限滚动实现旨在确保没有任何布局偏移（无论服务器需要多长时间来响应新内容）。
许多无限滚动实现最常见的问题之一是，每当添加新项时，页面页脚（或类似的用户体验元素）都会进一步下推页面。采用这种无限滚动的实现时，绝不会发生这种情况。
总体方法
尽可能在用户到达新内容之前将新内容插入页面中。由于这种插入发生在屏幕之外（且用户看不到），因此用户不会遇到布局偏移。
如果无法及时插入新内容，系统会显示“展开”按钮。不过，该按钮仅在新项准备就绪可供显示时才会启用，这可以确保用户不会点击该按钮，只是发现没有任何反应。因此，无论服务器响应新内容的速度有多慢（或用户滚动网页的速度有多快），都绝不会发生任何意外的布局偏移。
实现
Intersection Observer API 可高效监控页面元素的位置和可见性。此设计是使用两个单独的互动观察器实现的：
listObserver会观察位于无限滚动列表末尾的#infinite-scroll-button的位置。当按钮靠近视口时，系统会将未插入的内容添加到 DOM 中。sentinelObserver会观察#sentinel元素的位置。当标记变为可见后，会向服务器请求更多内容。通过调整哨点的位置，即可控制应提前多久从服务器请求新内容。
这并不是解决因使用无限滚动而导致的布局偏移的唯一方法。解决此问题的其他方法包括切换到分页、使用列表虚拟化以及调整页面布局。
HTML
<div id="infinite-scroll-container">
<div id="sentinel"></div>
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<button id="infinite-scroll-button" disabled>
<span class="disabled-text">Loading more items...</span>
<span class="active-text">Show more</span>
</button>
</div>CSS
:root {
--active-button-primary: #0080ff;
--active-button-font:#ffffff;
--disabled-button-primary: #f5f5f5;
--disabled-button-secondary: #c4c4c4;
--disabled-button-font: #000000;
}
#infinite-scroll-container {
position: relative;
}
#sentinel {
position: absolute;
bottom: 150vh;
}
#infinite-scroll-button {
cursor: pointer;
border: none;
padding: 1em;
width: 100%;
font-size: 1em;
}
#infinite-scroll-button:enabled {
color: var(--active-button-font);
background-color: var(--active-button-primary)
}
#infinite-scroll-button:disabled {
color: var(--disabled-button-font);
background-color: var(--disabled-button-primary);
cursor: not-allowed;
animation: 3s ease-in-out infinite loadingAnimation;
}
#infinite-scroll-button:enabled .disabled-text {
display: none;
}
#infinite-scroll-button:disabled .active-text {
display: none;
}
@keyframes loadingAnimation {
0% {
background-color: var(--disabled-button-primary);
}
50% {
background-color: var(--disabled-button-secondary);
}
100% {
background-color: var(--disabled-button-primary);
}
}
JS
function infiniteScroll() {
let responseBuffer = [];
let hasMore;
let requestPending = false;
const loadingButtonEl = document.querySelector('#infinite-scroll-button');
const containerEl = document.querySelector('#infinite-scroll-container');
const sentinelEl = document.querySelector("#sentinel");
const insertNewItems = () => {
while (responseBuffer.length > 0) {
const data = responseBuffer.shift();
const el = document.createElement("div");
el.textContent = data;
el.classList.add("item");
el.classList.add("new");
containerEl.insertBefore(el, loadingButtonEl);
console.log(`inserted: ${data}`);
}
sentinelObserver.observe(sentinelEl);
if (hasMore === false) {
loadingButtonEl.style = "display: none";
sentinelObserver.unobserve(sentinelEl);
listObserver.unobserve(loadingButtonEl);
}
loadingButtonEl.disabled = true
}
loadingButtonEl.addEventListener("click", insertNewItems);
const requestHandler = () => {
if (requestPending) return;
console.log("making request");
requestPending = true;
fakeServer.fakeRequest().then((response) => {
console.log("server response", response);
requestPending = false;
responseBuffer = responseBuffer.concat(response.items);
hasMore = response.hasMore;
loadingButtonEl.disabled = false;;
});
}
const sentinelObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
observer.unobserve(sentinelEl);
requestHandler();
}
});
});
const listObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0 && entry.intersectionRatio < 1) {
insertNewItems();
}
});
}, {
rootMargin: "0px 0px 200px 0px"
});
sentinelObserver.observe(sentinelEl);
listObserver.observe(loadingButtonEl);
}
infiniteScroll();