Javascript 使用 jQuery 检测用户何时滚动到 div 的底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6271237/
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
Detecting when user scrolls to bottom of div with jQuery
提问by Eax
I have a div box (called flux) with a variable amount of content inside. This divbox has overflow set to auto.
我有一个 div 框（称为flux），里面有不同数量的内容。此 divbox 已将溢出设置为自动。
Now, what I am trying to do, is, when the use scroll to the bottom of this DIV-box, load more content into the page, I know how to do this (load the content) but I don't know how to detect when the user has scrolled to the bottom of the div tag? If I wanted to do it for the entire page, I'd take .scrollTop and subtract that from .height.
现在，我想做的是，当使用滚动到此 DIV 框的底部时，将更多内容加载到页面中，我知道如何执行此操作（加载内容）但我不知道如何检测用户何时滚动到 div 标签的底部？如果我想为整个页面执行此操作，我会使用 .scrollTop 并将其从 .height 中减去。
But I can't seem to do that here?
但我似乎不能在这里这样做？
I've tried taking .scrollTop from flux, and then wrapping all the content inside a div called inner, but if I take the innerHeight of flux it returns 564px (the div is set to 500 as height) and the height of 'innner' it returns 1064, and the scrolltop, when at the bottom of the div says 564.
我尝试从flux中获取.scrollTop，然后将所有内容包装在一个名为inner的div中，但是如果我获取flux的innerHeight，它将返回564px（div设置为500作为高度）和'innner'的高度它返回 1064，当 div 底部显示 564 时，scrolltop 返回。
What can I do?
我能做什么？
回答by Dr.Molle
There are some properties/methods you can use:
您可以使用一些属性/方法：
$().scrollTop()//how much has been scrolled
$().innerHeight()// inner height of the element
DOMElement.scrollHeight//height of the content of the element
So you can take the sum of the first two properties, and when it equals to the last property, you've reached the end:
所以你可以取前两个属性的总和，当它等于最后一个属性时，你就到了最后：
jQuery(function($) {
$('#flux').on('scroll', function() {
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
alert('end reached');
}
})
});
http://jsfiddle.net/doktormolle/w7X9N/
http://jsfiddle.net/doktormolle/w7X9N/
Edit: I've updated 'bind' to 'on' as per:
编辑：我已将“绑定”更新为“开”，如下所示：
As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.
从 jQuery 1.7 开始， .on() 方法是将事件处理程序附加到文档的首选方法。
回答by ehsan Aghaei
I found a solution that when you scroll your window and end of a div shown from bottom gives you an alert.
我找到了一个解决方案，当您滚动窗口并从底部显示的 div 结束时，会向您发出警报。
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {
alert('end reached');
}
});
In this example if you scroll down when div (.posts) finish its give you an alert.
在这个例子中，如果你在 div ( .posts) 完成时向下滚动它会给你一个警报。
回答by Thinking
Though the question was asked 5.5 years ago, still it is more than relevant in today's UI/UX context. And I would like to add my two cents.
尽管这个问题是在 5.5 年前提出的，但它在今天的 UI/UX 上下文中仍然非常重要。我想加上我的两分钱。
var element = document.getElementById('flux');
if (element.scrollHeight - element.scrollTop === element.clientHeight)
{
// element is at the end of its scroll, load more content
}
来源：https: //developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled
Some elements won't allow you to scroll the full height of the element. In those cases you can use:
某些元素不允许您滚动元素的整个高度。在这些情况下，您可以使用：
var element = docuement.getElementById('flux');
if (element.offsetHeight + element.scrollTop === element.scrollHeight) {
// element is at the end of its scroll, load more content
}
回答by Alexander Millar
Just an additional note here as I found this when looking for a solution for a fixed div that I want to scroll. For my scenario I found that its preferable to take into account the padding on the div so I can hit the end exactly. So expanding on @Dr.Molle's answer I add the following
这里只是一个附加说明，因为我在寻找我想要滚动的固定 div 的解决方案时发现了这一点。对于我的场景，我发现最好考虑 div 上的填充，这样我就可以准确地结束。所以扩展@Dr.Molle 的答案，我添加以下内容
$('#flux').bind('scroll', function() {
var scrollPosition = $(this).scrollTop() + $(this).outerHeight();
var divTotalHeight = $(this)[0].scrollHeight
+ parseInt($(this).css('padding-top'), 10)
+ parseInt($(this).css('padding-bottom'), 10)
+ parseInt($(this).css('border-top-width'), 10)
+ parseInt($(this).css('border-bottom-width'), 10);
if( scrollPosition == divTotalHeight )
{
alert('end reached');
}
});
That'll give you the precise location, including padding and borders
这将为您提供精确的位置，包括填充和边框
回答by Ricardo Rivas
this worked for me though
不过这对我有用
$(window).scroll(function() {
if ($(window).scrollTop() >= (($(document).height() - $(window).height()) - $('#divID').innerHeight())) {
console.log('div reached');
}
});
回答by Goose
If you need to use this on a div that has overflow-y as hidden or scroll, something like this may be what you need.
如果你需要在一个隐藏或滚动的 div 上使用它，像这样的东西可能是你需要的。
if ($('#element').prop('scrollHeight') - $('#element').scrollTop() <= Math.ceil($('#element').height())) {
at_bottom = true;
}
I found ceil was needed because prop scrollHeight seems to round, or perhaps some other reason causing this to be off by less than 1.
我发现需要 ceil 是因为 prop scrollHeight 似乎是圆的，或者可能是其他一些原因导致它的偏差小于 1。
回答by Павел Гавриленко
If you are not using Math.round() function the solution suggestedby Dr.Molle will not work in some cases when a browser window has a zoom.
如果您没有使用 Math.round() 函数，当浏览器窗口具有缩放功能时，Dr.Molle建议的解决方案在某些情况下将不起作用。
For example $(this).scrollTop() + $(this).innerHeight() = 600
例如 $(this).scrollTop() + $(this).innerHeight() = 600
$(this)[0].scrollHeight yields = 599.99998
$(this)[0].scrollHeight 收益率 = 599.99998
600 >= 599.99998 fails.
600 >= 599.99998 失败。
Here is the correct code:
这是正确的代码：
jQuery(function($) {
$('#flux').on('scroll', function() {
if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10)) {
alert('end reached');
}
})
});
You may also add some extra margin pixels if you do not need a strict condition
如果您不需要严格的条件，您还可以添加一些额外的边距像素
var margin = 4
jQuery(function($) {
$('#flux').on('scroll', function() {
if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10) - margin) {
alert('end reached');
}
})
});
回答by Akshay Hegde
Though this was asked almost 6 years, ago still hot topic in UX design, here is demo snippet if any newbie wanted to use
虽然这个问题已经问了将近 6 年了，但以前仍然是 UX 设计的热门话题，如果有任何新手想使用，这里是演示片段
$(function() {
/* this is only for demonstration purpose */
var t = $('.posts').html(),
c = 1,
scroll_enabled = true;
function load_ajax() {
/* call ajax here... on success enable scroll */
$('.posts').append('<h4>' + (++c) + ' </h4>' + t);
/*again enable loading on scroll... */
scroll_enabled = true;
}
$(window).bind('scroll', function() {
if (scroll_enabled) {
/* if 90% scrolled */
if($(window).scrollTop() >= ($('.posts').offset().top + $('.posts').outerHeight()-window.innerHeight)*0.9) {
/* load ajax content */
scroll_enabled = false;
load_ajax();
}
}
});
});h4 {
color: red;
font-size: 36px;
background-color: yellow;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="posts">
Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit
sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut
libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet
lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque
</div>回答by Louay Alosh
In simple DOM usage you can check the condition
在简单的 DOM 用法中，您可以检查条件
element.scrollTop + element.clientHeight == element.scrollHeight
if true then you have reached the end.
如果为真，那么你已经走到了尽头。
回答by Starwave
If anyone gets scrollHeightas undefined, then select elements' 1st subelement: mob_top_menu[0].scrollHeight
如果有人得到scrollHeightas undefined，则选择元素的第一个子元素：mob_top_menu[0].scrollHeight
