[英]What is the difference between $(document).height() and $(window).height()
(Hope it is not a duplicate because I didn't find it when searching and googling) (希望它不是重复的,因为我在搜索和谷歌搜索时没有找到它)
I am trying to find how to detect in some fixed-height div ('#div') when the scroll-bar is reaching the bottom of this latter div. 当滚动条到达后一个div的底部时,我试图找到如何检测某些固定高度div('#div')。 Should I use
$(document).height()
and $(window).height()
to detect this event ? 我应该使用
$(document).height()
和$(window).height()
来检测此事件吗?
Edit : My div which is fixed-height and about which I set auto-scroll, so how to deal with that ? 编辑:我的div是固定高度,我设置自动滚动,所以如何处理? if I am suppose to use $('#div').height(), this height is fixed....
如果我想使用$('#div')。height(),这个高度是固定的....
In the .height()
documentation: 在
.height()
文档中:
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
In your case it sounds like you may want the height of the document
rather than the window
. 在您的情况下,听起来您可能想要
document
的高度而不是window
。 Think of it this way: The window
height is what you see, but the document
height includes everything below or above. 可以这样想:
window
高度就是您所看到的,但document
高度包括下方或上方的所有内容。
EDIT : 编辑 :
Checking for top and bottom on scroll with help from the scrollTop()
method: 在
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");
}
});
The document height is the entire height of the whole document, even what is outside the viewable area. 文档高度是整个文档的整个高度,甚至是可视区域之外的高度。 This could be thousands of pixels if you have a long page.
如果您有一个长页面,这可能是数千像素。 The window height is just the viewable area.
窗户高度只是可视区域。
Difference between $(window).height() and $(document).height() function. $(window).height()和$(document).height()函数之间的区别。
$(window).height() function: $(window).height()函数:
Ideally $(window).height() returns the pixel less height of browser window. 理想情况下,$(window).height()返回像素较少的浏览器窗口高度。 This is always the height of current browser window.
这始终是当前浏览器窗口的高度。 If you resize browser this value should change.
如果您调整浏览器大小,则此值应更改。
$(document).height() function: $(document).height() returns an unit-less pixel value of the height of the document being rendered. $(document).height()函数:$(document).height()返回正在呈现的文档高度的无单位像素值。
In HTML if you dont declare DOCTYPE then all time HTML page returns $(window).height() and $(document).height() same value. 在HTML中,如果你没有声明DOCTYPE,那么所有时间HTML页面都返回$(window).height()和$(document).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>
Output : 输出:
$(window).height() = 750
$(document).height() = 750
Lorem ipsum dolor sit amet
After declare DOCTYPE its returns perfect value. 声明DOCTYPE后,它返回完美值。
<!DOCTYPE HTML>
<html>
write above code here
</html>
Output : 输出:
$(window).height() = 750
$(document).height() = 750
Lorem ipsum dolor sit amet
The height of the document is not necessarily the same as the height of the window. 文档的高度不一定与窗口的高度相同。 If you have a simple document with just a DIV and a little bit of text, the doc height will be miniscule compared to the height of the window.
如果你有一个只带有DIV和一点文字的简单文档,那么与窗口的高度相比,doc高度将是微不足道的。
Here's the code from jQuery source: 这是来自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]);
}
So for $(window)
clientHeight
is used. 因此,对于
$(window)
,使用clientHeight
。 Which, as @Drew correctly mentioned the height of visible screen area. 其中,正如@Drew正确提到可见屏幕区域的高度。
For $(document)
the whole scroll height of the current page will be used. 对于
$(document)
,将使用当前页面的整个滚动高度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.