jQuery：如何确定 div 向下滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/986763/
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
jQuery : how to determine that a div is scrolled down
提问by glmxndr
I have a div with defined height, and overflow:scroll;. Its content is too long so scrollbars appear.
我有一个具有定义高度的 div，并且overflow:scroll;. 它的内容太长，所以出现滚动条。
Now for the ichy part. Some of its inner HTML strangely appears all the time (to be precise, the footer of a table generated by the tableFilter plugin). I'd like to make this footer disappear when it is not needed (it actually appears out of the containing <div>'s border). I resolved to make it disappear but setting its z-indexto -1000. But I want to make it appear when the containing <div>is totally scrolled down.
现在是痒的部分。它的一些内部 HTML 总是奇怪地出现（准确地说，是 tableFilter 插件生成的表格的页脚）。我想让这个页脚在不需要时消失（它实际上出现在 contains<div>的边框之外）。我决定让它消失，但将其设置z-index为-1000. 但是我想让它在包含<div>完全向下滚动时出现。
How can I know the user has scrolled at the bottom ?
我怎么知道用户已经滚动到底部？
Using the help from answers below, I used scrollTopattribute but the difference between scrollTopand innerHeightis the size of the scrollbar plus some unidentified delta. A scrollbar is 16 pixels high in most browsers under Windows, but I get a difference of 17 in Firefox and something like 20 in IE, where my <div>content's borders seems to be rendered bigger.
使用从下面的答案的帮助下，我使用的scrollTop属性，但之间的差异scrollTop，并innerHeight为滚动条加上一些不明身份的三角洲的大小。在 Windows 下的大多数浏览器中，滚动条的高度为 16 像素，但我在 Firefox 中得到了 17 像素的差异，而在 IE 中则为 20 像素，我的<div>内容的边框似乎呈现得更大。
A way (actually two ways...) to compute the scrollbar size has been given there.
一种方法（其实两种方式...）来计算滚动条大小已经给那里。
回答by Shaun Humphries
You need to compare the div height with the scrollTop position and the element height.
您需要将 div 高度与 scrollTop 位置和元素高度进行比较。
$(div).scroll(function(){
if(isScrollBottom()){
//scroll is at the bottom
//do something...
}
});
function isScrollBottom() {
var elementHeight = $(element).height();
var scrollPosition = $(div).height() + $(div).scrollTop();
return (elementHeight == scrollPosition);
}
回答by Zelenova
You can know if the div is scrolled down by simply doing this:
只需执行以下操作，您就可以知道 div 是否向下滚动：
if ( div.scrollTop + div.clientHeight == div.scrollHeight ){
//...
}
It works on Firefox, Chrome and IE8
它适用于 Firefox、Chrome 和 IE8
回答by Ryan Florence
No jQuery needed to get that info:
无需 jQuery 即可获取该信息：
element.scrollTop;
In a scroll event of your DIV, use that info to check against the height of the element, if it matches (or is close to matching) do whatever you want.
在 DIV 的滚动事件中，使用该信息来检查元素的高度，如果它匹配（或接近匹配），请执行您想要的任何操作。
回答by A.J.Bauer
This is not limited to divs:
这不仅限于 div：
toallyScrolled = element.scrollHeight - element.scrollTop === element.clientHeight;
from MDN Element.scrollHeight. There's also a nice demo on that page.
来自 MDN Element.scrollHeight。该页面上还有一个不错的演示。
回答by Yene Mulatu
function elementInViewport(el) {
var listcontent= $(".listContainer")[0].getBoundingClientRect();
var rect = $(el)[0].getBoundingClientRect();
return [( rect.top >= 0 && rect.left >= 0 && rect.bottom <= listcontent.bottom), ( rect.bottom - listcontent.bottom )]
}
回答by Yene Mulatu
You just need to use the scrollHeight property of the div instead of height. The function isScrollBottom() which Shaun Humphrieswrote previously can be put like this
您只需要使用 div 的 scrollHeight 属性而不是高度。Shaun Humphries之前写的函数 isScrollBottom()可以这样放
function isScrollBottom() {
var totalHeight = $("divSelector")[0].scrollHeight;
var scrollPosition = $("divSelector").height() + $("divSelector").scrollTop();
return (totalHeight == scrollPosition);
}
回答by bits.spidey
I think, simply
我想，简直
$(this).scrollTop()
$(this).scrollTop()
would do the trick.
会做的伎俩。
