使用React js检测用户何时滚动到div的底部
我有一个包含不同部分的网站。我正在使用segment.io来跟踪页面上的不同操作。如何检测用户是否滚动到div的底部？我尝试了以下操作，但似乎在页面上滚动后立即触发，而不是在到达div底部时触发。
componentDidMount() {
document.addEventListener('scroll', this.trackScrolling);
}
trackScrolling = () => {
const wrappedElement = document.getElementById('header');
if (wrappedElement.scrollHeight - wrappedElement.scrollTop === wrappedElement.clientHeight) {
console.log('header bottom reached');
document.removeEventListener('scroll', this.trackScrolling);
}
};
问题答案：
您可以el.getBoundingClientRect().bottom用来检查底部是否已被查看
isBottom(el) {
return el.getBoundingClientRect().bottom <= window.innerHeight;
}
componentDidMount() {
document.addEventListener('scroll', this.trackScrolling);
}
componentWillUnmount() {
document.removeEventListener('scroll', this.trackScrolling);
}
trackScrolling = () => {
const wrappedElement = document.getElementById('header');
if (this.isBottom(wrappedElement)) {
console.log('header bottom reached');
document.removeEventListener('scroll', this.trackScrolling);
}
};
-
问题内容： 我有一个div框（称为“通量”），里面包含可变数量的内容。此divbox的溢出设置为auto。 现在，我想做的是，当使用滚动到此DIV框的底部时，将更多内容加载到页面中，我知道如何执行此操作（加载内容），但是我不知道如何检测用户何时滚动到div标签的底部？如果我想在整个页面上这样做，我会选择.scrollTop并将其从.height中减去。 但是我似乎无法在这里这样做？ 我尝试从磁通量
-
问题内容： 以下文章是否仍然是检测UITableView实例何时滚动到底部（在Swift中），还是自那以来已被更改（例如：改进）的公认方法？ 谢谢。 问题答案： 试试这个 或者你可以这样找到
-
问题内容： 我正在使用Ajax请求创建聊天，并且试图使消息div滚动到底部没有太多运气。 我将所有内容包装在这个div中： 有没有一种方法可以使用JS将其默认滚动到底部？ 有没有一种方法可以在ajax请求后将其滚动到底部？ 问题答案： 这是我在网站上使用的内容：
-
问题内容： 我正在使用Rails中的Ajax请求创建聊天，并且试图使div滚动到底部没有太多运气。 我将所有内容包装在这个div中： 有没有一种方法可以使用JS将其默认滚动到底部？ 有没有办法在ajax请求之后将其滚动到底部？ 问题答案： 这是我在网站上使用的内容：
-
我有这个代码为回收人员视图。 我需要知道在滚动时RecyclerView何时到达最底部的位置。可能吗？如果是，怎么做？
-
问题内容： 我正在创建一个分页系统（类似于Facebook），当用户滚动到底部时会加载内容。我想最好的方法是找到用户何时位于页面底部，并运行ajax查询以加载更多帖子。 唯一的问题是我不知道如何使用jQuery检查用户是否已滚动到页面底部。有任何想法吗？ 我需要找到一种方法来检查用户何时使用jQuery滚动到页面底部。 问题答案： 在上使用事件，如下所示： 您可以在此处进行测试，这将使窗口顶部滚动