我有一个包含许多博客文章的动态网站。我想首先加载四个帖子，然后在滚动到末尾时加载另外四个帖子。我知道如何在后端处理它，但我在前端遇到问题。我已将 html 和 body 的高度设置为 100%，因此窗口上的滚动事件不起作用。作为解决方法，我决定使用单个 div 来检测滚动。我在 div 上添加了滚动事件，效果很好。但是当我尝试检测 div 上的滚动结束时，在执行任何滚动之前在页面加载开始时执行的代码。我使用的代码是：
if (element.scrollHeight - element.scrollTop === element.clientHeight){
alert("End");
}
如何使警报仅在 div 滚动到末尾而不是在开头时出现？
您可以使用element.scrollTop + element.offsetHeight>= element.scrollHeight检测滚动结束。
Update：
还添加一个条件，以便向上滚动时不会触发。
有关向上滚动条件的更多信息，您可以检查这个链接。
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
