检测div中的滚动结束

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

活动。
在 chromium 108、firefox 109 上测试

示例：

const output = document.querySelector("p#output");

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

根据 mdn 文档：
当文档视图完成滚动时，会触发

scrollend

事件。
当滚动位置不再有挂起的更新并且
时，滚动被认为已完成 用户已完成手势。

在 mdn 了解更多信息：文档：scrollend 事件

Answer 3

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

我主要用这个作为条件

Answer 4

element.scrollTopMax浏览器支持较差，请尝试this

Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) <= 1