在一个 div 中检测滚动结束

Question

我有一个动态网站，有很多博客文章。我希望一开始只加载四篇文章，当滚动到底部时再加载另外四篇。我知道如何在后端处理它，但是前端遇到了问题。我将html和body的高度设置为100%，因此窗口上的滚动事件无法工作。作为解决方法，我决定使用单个div来检测滚动。我在div上添加了滚动事件，它工作得很好。但是当我尝试在div上检测滚动结束时，代码在执行任何滚动之前就在页面加载开始时执行了。我使用的代码是：

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

我该如何让提示框在滚动到 div 的末尾后才出现，而不是在开头就出现？

- iamsubingyawali

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>

- Cybershadow

---

这个能直接用于（移动）触摸事件吗？ - undefined

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 上了解更多：Document: scrollend event。

- Anil kumar

---

很酷，但浏览器兼容性不好 :/ 而且它被认为是实验性的。 - undefined

Answer 3

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

我主要将其用作条件

- Luca Meneghini

---

这是非标准的，scrollTopMax仅在2023年10月之后的Firefox版本中受支持。 - undefined