(搜索和谷歌搜索时,希望这不是一个重复的,因为我没有找到它)
我试图找到如何在一些固定高度的div(“#div”)检测时滚动条是达到后者div的底部。 我应该使用$(document).height()
和$(window).height()
来检测这个活动?
编辑:我的DIV这是固定高度,对此我设置自动滚动,因此如何处理呢? 如果我想使用$(“#DIV”)。高度(),这个高度是固定的....
(搜索和谷歌搜索时,希望这不是一个重复的,因为我没有找到它)
我试图找到如何在一些固定高度的div(“#div”)检测时滚动条是达到后者div的底部。 我应该使用$(document).height()
和$(window).height()
来检测这个活动?
编辑:我的DIV这是固定高度,对此我设置自动滚动,因此如何处理呢? 如果我想使用$(“#DIV”)。高度(),这个高度是固定的....
在.height()
文档:
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
在你的情况下,它听起来像你可能希望的高度document
,而不是window
。 它认为这种方式: window
的高度是你所看到的,但document
的高度低于包括一切以上。
例
编辑 :
检查从帮助顶部和底部的滚动scrollTop()
方法:
var bottom = $(document).height() - $(window).height();
$(document).scroll(function(){
var position = $(this).scrollTop();
if (position === bottom) {
console.log("bottom");
}else if(position === 0){
console.log("top");
} else {
console.log("scrolling");
}
});
该文件的高度是整个文档的整个高度,甚至什么是可视区域之外。 这可能是成千上万个像素,如果你有很长的页面。 该窗口的高度只是可视区域。
$(窗口).height()和$(文件).height()函数之间的区别。
$(窗口).height()函数:
理想的情况是$(窗口).height()返回浏览器窗口的像素少的高度。 这始终是当前浏览器窗口的高度。 如果调整浏览器这个值会改变。
(文档)$ .height()函数:$(文件).height()返回所呈现的文档的高度的无单位的像素值。
在HTML如果你不声明DOCTYPE,那么所有的时间HTML页面返回$(窗口).height()和$(文件).height()相同的值。
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#winheight').text($(window).height());
$('#docheight').text($(document).height());
});
</script>
</head>
<body>
<div id="console">
$(window).height() = <span id="winheight"></span> <br/>
$(document).height() = <span id="docheight"></span>
</div>
<p>Lorem ipsum dolor sit amet</p>
</body>
</html>
输出:
$(window).height() = 750
$(document).height() = 750
Lorem ipsum dolor sit amet
申报后DOCTYPE其完美的回报价值。
<!DOCTYPE HTML>
<html>
write above code here
</html>
输出:
$(window).height() = 750
$(document).height() = 750
Lorem ipsum dolor sit amet
该文件的高度不一定是一样的窗口的高度。 如果你只是一个DIV一个简单的文档和文本的一点点,商务部高度会比窗口的高度是微乎其微。
下面是从jQuery的源代码:
if (jQuery.isWindow(elem)) {
// As of 5/8/2012 this will yield incorrect results for Mobile Safari, but there
// isn't a whole lot we can do. See pull request at this URL for discussion:
// https://github.com/jquery/jquery/pull/764
return elem.document.documentElement["client" + name];
}
// Get document width or height
if (elem.nodeType === 9) {
doc = elem.documentElement;
// Either scroll[Width/Height] or offset[Width/Height] or client[Width/Height], whichever is greatest
// unfortunately, this causes bug #3838 in IE6/8 only, but there is currently no good, small way to fix it.
return Math.max(
elem.body["scroll" + name], doc["scroll" + name],
elem.body["offset" + name], doc["offset" + name],
doc["client" + name]);
}
因此,对于$(window)
clientHeight
使用。 其中,作为@Drew正确提到的屏幕可视区域的高度。
对于$(document)
将被用于当前页面的整体滚动高度。