正在检测分区中的滚动结束

Question

我有一个动态网站，里面有很多博客文章。我想一开始只加载四个帖子，滚动到最后再加载四个。我知道如何在后端处理它，但我在前端遇到了问题。我已经将html和body的高度设置为100%，因此窗口上的滚动事件不起作用。作为一种变通方法，我决定使用一个div来检测滚动。我在div上添加了滚动事件，它运行得很好。但是，当我试图检测div上的滚动结束时，在执行任何滚动之前，在页面加载开始时执行的代码。我使用的代码是：

if (element.scrollHeight - element.scrollTop === element.clientHeight){
alert("End");
}

如何使警报只在div滚动到末尾后才显示，而不是在开始时显示？

Answer 1

您可以使用element.scrollTop + element.offsetHeight>= element.scrollHeight来检测滚动结束。

更新：还添加了一个条件，以便在向上滚动时不会触发。有关向上滚动条件的更多信息，您可以查看此链接。

const element = document.getElementById('element');
let lastScrollTop = 0;
element.onscroll = (e)=>{
if (element.scrollTop < lastScrollTop){
// upscroll 
return;
} 
lastScrollTop = element.scrollTop <= 0 ? 0 : element.scrollTop;
if (element.scrollTop + element.offsetHeight>= element.scrollHeight ){
console.log("End");
}
}

#element{
background:red;
max-height:300px;
overflow:scroll;
}
.item{
height:100px;
}

<div id="element">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>

Answer 2

2023年的答案。
现在我们有scrollend活动
在铬108、firefox 109 上进行测试

示例：

const output = document.querySelector("p#output");
document.addEventListener("scrollend", (event) => {
output.innerHTML = `Document scrollend event fired!`;
});

根据mdn文档：
scrollend事件在文档视图完成滚动时触发
当滚动位置没有更多挂起的更新并且
用户已经完成了他们的手势时，滚动被视为完成。

在mdn了解更多信息：文档：滚动结束事件

Answer 3

element.scrollTop + element.offsetHeight >= element.scrollTopMax

我主要将此作为条件