javascript：检测滚动结束
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3962558/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript: detect scroll end
提问by Zebra
I have a divlayer with overflowset to scroll.
我有一个div与层overflow设置为scroll。
When scrolled to the bottom of the div, I wanna run a function.
当滚动到 底部时div，我想运行一个函数。
回答by Bjorn
The accepted answer was fundamentally flawed, it has since been deleted. The correct answer is:
接受的答案从根本上是有缺陷的，它已被删除。正确答案是：
function scrolled(e) {
if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) {
scrolledToBottom(e);
}
}
Tested this in Firefox, Chrome and Opera. It works.
在 Firefox、Chrome 和 Opera 中对此进行了测试。有用。
回答by just_user
I could not get either of the above answers to work so here is a third option that works for me! (This is used with jQuery)
我无法获得上述任何一个答案，所以这里有第三个对我有用的选项！（这与 jQuery 一起使用）
if (($(window).innerHeight() + $(window).scrollTop()) >= $("body").height()) {
//do stuff
}
Hope this helps anyone!
希望这可以帮助任何人！
回答by maxspan
OK Here is a Good And Proper Solution
好的，这是一个很好且正确的解决方案
You have a Div call with an id="myDiv"
你有一个 Div 调用 id="myDiv"
so the function goes.
所以这个功能就开始了。
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
}
}
回答by AlexQueue
This worked for me:
这对我有用：
$(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();
}
});
Must use jQuery 1.6 or higher
必须使用 jQuery 1.6 或更高版本
回答by Chandler Zwolle
I found an alternative that works.
我找到了一个可行的替代方案。
None of these answers worked for me (currently testing in FireFox 22.0), and after a lot of research I found, what seems to be, a much cleaner and straight forward solution.
这些答案都不适合我（目前在 FireFox 22.0 中进行测试），经过大量研究后我发现，似乎是一个更清晰、更直接的解决方案。
Implemented solution:
实施的解决方案：
function IsScrollbarAtBottom() {
var documentHeight = $(document).height();
var scrollDifference = $(window).height() + $(window).scrollTop();
return (documentHeight == scrollDifference);
}
资源：http: //jquery.10927.n7.nabble.com/How-can-we-find-out-scrollbar-position-has-reached-at-the-bottom-in-js-td145336.html
Regards
问候
回答by Pylinux
I created a event based solution based on Bjorn Tipling's answer:
我根据 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));
And you use the event like this:
你像这样使用这个事件：
document.addEventListener('end-of-page-reached', function(){
console.log('you reached the end of the page');
});
BTW: you need to add this CSS for javascript to know how long the page is
顺便说一句：您需要为 javascript 添加此 CSS 以了解页面的长度
html, body {
height: 100%;
}
回答by ddavidad
This will actually be the correct answer:
这实际上是正确的答案：
function scrolled(event) {
const container = event.target.body
const {clientHeight, scrollHeight, scrollY: scrollTop} = container
if (clientHeight + scrollY >= scrollHeight) {
scrolledToBottom(event);
}
}
The reason for using the eventis up-to-date data, if you'll use a direct reference to the div you'll get outdated scrollYand will fail to detect the position correctly.
使用 的原因event是最新数据，如果您使用对 div 的直接引用，您将过时scrollY并且无法正确检测位置。
additional way is to wrap it in a setTimeoutand wait till the data updates.
另一种方法是将其包装在 a 中setTimeout并等待数据更新。
回答by Moshe Cohen
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight)
{
//your code here
}
I too searched it and even after checking all comments here and more, this is the solution to check if reached the bottom or not.
我也搜索了它，甚至在检查了这里的所有评论和更多之后，这是检查是否到达底部的解决方案。
回答by jherax
Take a look at this example: MDN Element.scrollHeight
看看这个例子：MDN Element.scrollHeight
I recommend that check out this example: stackoverflow.com/a/24815216...which implements a cross-browser handling for the scroll action.
我建议查看此示例：stackoverflow.com/a/24815216...它实现了滚动操作的跨浏览器处理。
You may use the following snippet:
您可以使用以下代码段：
//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");
}
});
回答by Rado
Since innerHeightdoesn't work in some old IE versions, clientHeightcan be used:
由于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();
}
});
