javascript 检测div中的滚动结束

n53p2ov0 于 2023-01-11 发布在 Java

关注(0)|答案(2)|浏览(259)

我有一个动态的网站，有很多博客文章。我想先加载四篇文章，滚动到最后再加载四篇。我知道如何在后端处理它，但我在前端有问题。我已经将html和body的高度设置为100%，由于窗口上的滚动事件不起作用。作为一个变通方案，我决定使用一个div来检测滚动。我在div上添加了scroll事件，它工作得很好。但是当我尝试在div上检测滚动结束时，在执行任何滚动之前，在页面加载开始时执行的代码。我使用的代码是：

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

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

JavaScript

来源：https://stackoverflow.com/questions/67549676/detecting-end-of-scroll-in-a-div

2条答案

按热度按时间

yb3bgrhw1#

可以使用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>

赞(0）回复(0）举报 2023-01-11

o7jaxewo2#

2023年的答案。
现在我们有了scrollend事件。
在 chrome 108、火狐109上测试
示例：

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

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

根据mdn文件：
当文档视图完成滚动时，将激发scrollend事件。
当滚动位置不再有未决更新并且
用户已经完成了他们的手势。
了解更多信息：Document: scrollend event

赞(0）回复(0）举报 2023-01-11

我来回答

javascript 检测div中的滚动结束

2条答案

相关问题

热门标签

最新问答