Javascript Jquery $(window).height() 函数不返回实际的窗口高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12787380/
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 $(window).height() function does not return actual window height
提问by Joel Joel Binks
I have a page that I need to dynamically load ajax content when the user scrolls to the bottom. The problem is that JQuery is not returning the correct window height. I have used this function before and have never seen it fail, but for some reason it will return the same value as the document height. I have the test page here: bangstyle.com/test-images
我有一个页面，当用户滚动到底部时，我需要动态加载 ajax 内容。问题是 JQuery 没有返回正确的窗口高度。我以前使用过这个函数，从未见过它失败，但由于某种原因，它会返回与文档高度相同的值。我在这里有测试页面：bangstyle.com/test-images
I have coded the alert to display at page load, and also whenever the user scrolls 500px below the top:
我已将警报编码为在页面加载时显示，以及每当用户滚动顶部下方 500 像素时显示：
function scroller() {
if($(window).scrollTop() > 500){
delay(function(){ //200ms wait
pagecounter++;
sideshow();
alert("window height: " + $(window).height() + " scrolltop: " + $(window).scrollTop() + " document height: " + $(document).height());
return false;
}, 200 );
}
}
I tried posting this before but I deleted it as I didn't get a solution. I hope it is ok to post a link to my test page. BTW I have tested this on Mac Safari and Mac FF. I have run this same code on other pages and it works fine. I feel there must be something in the dom of this page that causes JS to fail, but no idea what that would be.
我之前试过发布这个，但我删除了它，因为我没有得到解决方案。我希望可以发布到我的测试页面的链接。顺便说一句，我已经在 Mac Safari 和 Mac FF 上对此进行了测试。我在其他页面上运行了相同的代码，它工作正常。我觉得这个页面的 dom 中一定有一些东西会导致 JS 失败，但不知道那会是什么。
回答by Inferpse
Look at your HTML souce code.
The first line should be <!DOCTYPE html>and you have <style>tag instead.
查看您的 HTML 源代码。第一行应该是<!DOCTYPE html>，你有<style>标签。
So it seems that your document is running in Quirks Mode and jQuery can't calculate correct window dimensions.
因此，您的文档似乎在 Quirks 模式下运行，而 jQuery 无法计算正确的窗口尺寸。
回答by Geuis
//works in chrome
$(window).bind('scroll', function(ev){
//get the viewport height. i.e. this is the viewable browser window height
var clientHeight = document.body.clientHeight,
//height of the window/document. $(window).height() and $(document).height() also return this value.
windowHeight = $(this).outerHeight(),
//current top position of the window scroll. Seems this *only* works when bound inside of a scoll event.
scrollY = $(this).scrollTop();
if( windowHeight - clientHeight === scrollY ){
console.log('bottom');
}
});
回答by Pontual
I had the same problem. I've found some things:
我有同样的问题。我发现了一些东西：
1) the problem happens when you try to get the actual height before document is completed rendered; 2) the problem happens in google chrome when you does not use corret DOCTYPE (mentioned above) 3) it always happens in google chrome even after the document is rendered completly.
1) 在文档完成渲染之前尝试获取实际高度时出现问题；2) 当您不使用 corret DOCTYPE（如上所述）时，问题会在 google chrome 中发生 3) 即使在文档完全呈现之后，它也总是在 google chrome 中发生。
For google chrome, I've found a workaround here: get-document-height-cross-browserI'm using this solution only for google chrome and it resolved my problem, I expect helps someone that still have the problem.
对于谷歌浏览器，我在这里找到了一个解决方法：get-document-height-cross-browser我将此解决方案仅用于谷歌浏览器，它解决了我的问题，我希望能帮助仍然有问题的人。
回答by ozzysong
This is an old question but I recently struggled with not getting the correct window height in IE10 by a few pixels.
这是一个老问题，但我最近在 IE10 中没有获得正确的窗口高度几个像素而苦苦挣扎。
I discovered that IE10 applies a 75% zoom by default and that screws the window and document measurements.
我发现 IE10 默认应用 75% 的缩放比例，这会影响窗口和文档的测量。
So, if you're getting wrong width or height, make sure zoom is set to 100%.
因此，如果您得到错误的宽度或高度，请确保将缩放设置为 100%。
回答by Lex
Since jquery (and dom in general) is not calculating sizes correctly in quirksmode, two solutions:
由于 jquery（以及一般的 dom）在 quirksmode 中无法正确计算大小，因此有两种解决方案：
- Add doctype html at the top of your page (like mentioned in "correct" answer), or
- Use window.innerHeight, window.innerWidth if first option is not an option.
- 在页面顶部添加 doctype html（如“正确”答案中所述），或
- 如果第一个选项不是一个选项，则使用 window.innerHeight、window.innerWidth。
Hope it helps.
希望能帮助到你。
回答by harrykirsten
I moved my scripts from to footer and that resolved it for me.
我将我的脚本从页脚移到了页脚，并为我解决了这个问题。
回答by westlywright
Did some looking around and stumbled upon this, don't know if it helps but it's worth bringing up.
环顾四周并偶然发现了这一点，不知道它是否有帮助，但值得提出。
