检测div中的滚动结束

【问题标题】：Detecting end of scroll in a div检测div中的滚动结束
【发布时间】：2021-05-15 17:49:01
【问题描述】：

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

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

如何使警报仅在 div 滚动到末尾而不是开始时出现？

【问题讨论】：

标签： javascript html css ajax

【解决方案1】：

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

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

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>

【讨论】：