【发布时间】：2011-04-27 03:04:14
【问题描述】：
我有一个div 层，overflow 设置为scroll。
当滚动到div 的底部时，我想运行一个函数。
【问题讨论】：
-
截图坏了
标签： javascript jquery html scrollbar scroll
【发布时间】：2011-04-27 03:04:14
【问题描述】：
已接受的答案存在根本缺陷，已被删除。正确答案是：
function scrolled(e) {
if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) {
scrolledToBottom(e);
}
}
在 Firefox、Chrome 和 Opera 中对此进行了测试。它有效。
【讨论】：
-
你能告诉我们为什么它有缺陷吗？
-
因为它根本不检测滚动结束，它会检测页面向上滚动的部分何时与包含的div的高度相同！假设您要滚动的内容是 div 高度的两倍，一旦到达最后，scrollTop 值将是容器 offsetHeight 大小的两倍。接受的答案会检查它们是否相等，并且不会检测到结尾。我的解决方案检查 scrollTop + 容器的高度是否等于（或大于）整个可滚动区域，现在是底部！
-
@Alex
window.location.href = 'http://newurl.com';或window.open('http://newurl.com');+ 上面的代码。 -
提示是你不能让它工作是使用这个 CSS：
html, body: { height:100% }。 -
你能建议我如何检查 div 中的水平滚动条吗？
我无法获得上述任何一个答案，所以这里是第三种适合我的选项！ （这与 jQuery 一起使用）
if (($(window).innerHeight() + $(window).scrollTop()) >= $("body").height()) {
//do stuff
}
希望这对任何人都有帮助！
【讨论】：
好的，这里有一个好的和适当的解决方案
您有一个带有id="myDiv" 的 Div 电话
函数就这样运行了。
function GetScrollerEndPoint()
{
var scrollHeight = $("#myDiv").prop('scrollHeight');
var divHeight = $("#myDiv").height();
var scrollerEndPoint = scrollHeight - divHeight;
var divScrollerTop = $("#myDiv").scrollTop();
if(divScrollerTop === scrollerEndPoint)
{
//Your Code
//The Div scroller has reached the bottom
}
}
【讨论】：
-
为我工作，在 Chrome 中使用表格进行测试
-
谢谢！这对 Firefox 和 Chrome 都适用：D
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight)
{
//your code here
}
我也搜索过它，甚至在这里检查了所有 cmets 之后， 这是检查是否到达底部的解决方案。
【讨论】：
这对我有用：
$(window).scroll(function() {
buffer = 40 // # of pixels from bottom of scroll to fire your function. Can be 0
if ($(".myDiv").prop('scrollHeight') - $(".myDiv").scrollTop() <= $(".myDiv").height() + buffer ) {
doThing();
}
});
必须使用 jQuery 1.6 或更高版本
【讨论】：
我找到了一个可行的替代方案。
这些答案都不适合我（目前在 FireFox 22.0 中进行测试），经过大量研究后，我发现似乎是一个更清洁、更直接的解决方案。
实施的解决方案：
function IsScrollbarAtBottom() {
var documentHeight = $(document).height();
var scrollDifference = $(window).height() + $(window).scrollTop();
return (documentHeight == scrollDifference);
}
问候
【讨论】：
-
这也是唯一对我有用的答案，谢谢！
我根据 Bjorn Tipling 的回答创建了一个基于事件的解决方案：
(function(doc){
'use strict';
window.onscroll = function (event) {
if (isEndOfElement(doc.body)){
sendNewEvent('end-of-page-reached');
}
};
function isEndOfElement(element){
//visible height + pixel scrolled = total height
return element.offsetHeight + element.scrollTop >= element.scrollHeight;
}
function sendNewEvent(eventName){
var event = doc.createEvent('Event');
event.initEvent(eventName, true, true);
doc.dispatchEvent(event);
}
}(document));
你使用这样的事件：
document.addEventListener('end-of-page-reached', function(){
console.log('you reached the end of the page');
});
顺便说一句：您需要为 javascript 添加此 CSS 以了解页面的长度
html, body {
height: 100%;
}
【讨论】：
-
我现在看到 OP 要求的是 div 的结尾而不是页面的结尾，但我会在这里留下答案，以防它帮助其他人。
这实际上是正确的答案：
function scrolled(event) {
const container = event.target.body
const {clientHeight, scrollHeight, scrollY: scrollTop} = container
if (clientHeight + scrollY >= scrollHeight) {
scrolledToBottom(event);
}
}
使用event 的原因是最新数据，如果您使用对div 的直接引用，您将过时scrollY 并且无法正确检测位置。
另一种方法是将其包装在setTimeout 中并等待数据更新。
【讨论】：
看看这个例子：MDN Element.scrollHeight
我建议查看以下示例：stackoverflow.com/a/24815216...，它为滚动操作实现了跨浏览器处理。
你可以使用下面的sn-p：
//attaches the "scroll" event
$(window).scroll(function (e) {
var target = e.currentTarget,
scrollTop = target.scrollTop || window.pageYOffset,
scrollHeight = target.scrollHeight || document.body.scrollHeight;
if (scrollHeight - scrollTop === $(target).innerHeight()) {
console.log("► End of scroll");
}
});
【讨论】：
由于innerHeight在某些老IE版本中无法使用，所以可以使用clientHeight：
$(window).scroll(function (e){
var body = document.body;
//alert (body.clientHeight);
var scrollTop = this.pageYOffset || body.scrollTop;
if (body.scrollHeight - scrollTop === parseFloat(body.clientHeight)) {
loadMoreNews();
}
});
【讨论】：
要在 React/JSX 中做同样的事情，这里是 sn-p。
export const scrolledToEnd = event => {
const container = event.target;
if (container.offsetHeight + container.scrollTop >= container.scrollHeight) {
return true;
}
return false;
};
然后在你的组件中添加
<Component onScroll={scrolledToEnd}>
【讨论】：