$(document).height()和$(window).height()之间有什么区别
(希望它不是重复的,因为我在搜索和谷歌搜索时没有找到它)
当滚动条到达后一个div的底部时,我试图找到如何在一些固定高度div(’#div’)中检测。 我应该使用$(document).height()
和$(window).height()
来检测此事件吗?
编辑:我的div是固定高度,我设置自动滚动,所以如何处理? 如果我想使用$(’#div’)。height(),这个高度是固定的….
在.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"); } });
文档高度是整个文档的整个高度,甚至是可视区域之外的高度。 如果您有一个长页面,这可能是数千像素。 窗户高度只是可视区域。
$(window).height()和$(document).height()函数之间的区别。
$(window).height()函数:
理想情况下,$(window).height()返回像素较少的浏览器窗口高度。 这始终是当前浏览器窗口的高度。 如果您调整浏览器大小,则此值应更改。
$(document).height()函数:$(document).height()返回正在呈现的文档高度的无单位像素值。
在HTML中,如果你没有声明DOCTYPE,那么所有时间HTML页面都返回$(window).height()和$(document).height()相同的值。
$(window).height() =
$(document).height() = Lorem ipsum dolor sit amet
输出:
$(window).height() = 750 $(document).height() = 750 Lorem ipsum dolor sit amet
声明DOCTYPE后,它返回完美值。
write above code here
输出:
$(window).height() = 750 $(document).height() = 750 Lorem ipsum dolor sit amet
文档的高度不一定与窗口的高度相同。 如果你有一个只带有DIV和一点文字的简单文档,那么doc高度与窗口高度相比微不足道。
这是来自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)
,将使用当前页面的整个滚动高度。