检测 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>