html函数如何实现无限滚动加载 html函数监听滚动事件的技巧

window.addEventListener('scroll', function() {
  const scrollTop = window.pageYOffset;
  const windowHeight = window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;
  const threshold = 100; // 距离底部100px时触发
<p>if (scrollTop + windowHeight >= documentHeight - threshold) {
loadMoreData();
}
});</p>

let scrollTimer = null;
<p>window.addEventListener('scroll', function() {
if (scrollTimer) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(() => {
checkIfNearBottom();
}, 150); // 延迟150ms执行
});</p><p>function checkIfNearBottom() {
const threshold = 100;
const nearBottom = window.pageYOffset + window.innerHeight >= document.body.offsetHeight - threshold;</p><p>if (nearBottom && !isLoading) {
loadMoreData();
}
}</p>

let isLoading = false;
<p>function loadMoreData() {
if (isLoading) return;
isLoading = true;</p><p>// 模拟异步请求
fetch('/api/more-content')
.then(res => res.json())
.then(data => {
appendContent(data);
isLoading = false;
})
.catch(() => {
isLoading = false;
});
}</p>

<div id="loader" style="text-align: center; padding: 20px;">
  <span>加载中...</span>
</div>