Jquery $(window).height() 函数不返回实际窗口高度

Posted 2023-03-06

技术标签:

【中文标题】Jquery $(window).height() 函数不返回实际窗口高度【英文标题】：Jquery $(window).height() function does not return actual window height 【发布时间】：2012-09-29 00:54:06 【问题描述】：

我有一个页面，当用户滚动到底部时，我需要动态加载 ajax 内容。问题是 JQuery 没有返回正确的窗口高度。我以前使用过这个函数，从未见过它失败，但由于某种原因，它会返回与文档高度相同的值。我这里有测试页面：bangstyle.com/test-images

我已将警报编码为在页面加载时显示，以及每当用户滚动到顶部下方 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 );

我之前尝试过发布此内容，但由于没有得到解决方案而将其删除。我希望可以发布指向我的测试页面的链接。顺便说一句，我已经在 Mac Safari 和 Mac FF 上对此进行了测试。我在其他页面上运行了相同的代码，它工作正常。我觉得这个页面的 dom 中一定有什么东西导致 JS 失败，但不知道那会是什么。

【问题讨论】：

您应该使用“无限滚动”JQuery 插件来做到这一点。这里的一些项目：jquery4u.com/tutorials/jquery-infinite-scrolling-demos/… 谢谢。我看过那些，但我真的很想自己解决这个问题。如果我知道尺寸，我可以让它工作，但无论出于何种原因 window.height() 失败，我真的真的很想理解为什么。此代码在我使用过的其他页面上运行良好。测试了什么？你怎么知道窗口高度不正确？发布测试链接不仅可以，而且实际上非常有用（并向其他人展示您已尝试解决问题）；一张图值一千字，一个例子值两千字。 Kato，我将在加载 ajax 内容时获得与文档高度匹配的窗口高度值。例如，文档高度可能是 2200 像素，而我得到的窗口高度值与此匹配，即使我的窗口高度小于 1000 像素。在我发布的链接中，我为页面加载时以及用户从顶部滚动超过 500 像素的任何时间设置了 js 警报。 bangstyle.com/test-images 【参考方案1】：

环顾四周并偶然发现了这一点，不知道它是否有帮助，但值得提出。

why is $(window).height() so wrong?

【讨论】：

【参考方案2】：

查看您的 html 源代码。第一行应该是<!DOCTYPE html> 而你有<style> 标签。

看来您的文档在 Quirks 模式下运行，而 jQuery 无法计算正确的窗口尺寸。

【讨论】：

我会试试这个，虽然看起来奇怪的 doctype 会弄乱 js 试图获取 window.height。但我会试试看。你明白了！多么愚蠢的错误！我的 php 标头放错地方了！解决方案完美运行。由于 DOCTYPE 标签不正确，我遇到了同样的问题。谢谢您先生是个活生生的救星，我在过去的两个小时里尝试了所有可能的解决方案，但无法弄清楚为什么它对我不起作用。伟大的收获！在遇到您的答案之前，我对此感到非常困惑。【参考方案3】：

//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');
    

);

【讨论】：

【参考方案4】：

我遇到了同样的问题。我发现了一些东西：

1) 当您尝试在文档完成呈现之前获取实际高度时会出现问题； 2）当您不使用corret DOCTYPE（如上所述）时，谷歌浏览器会出现问题 3) 即使在文档完全呈现后，它也总是在谷歌浏览器中发生。

对于谷歌浏览器，我在这里找到了解决方法：get-document-height-cross-browser 我将此解决方案仅用于 google chrome，它解决了我的问题，我希望能帮助仍然有问题的人。

【讨论】：

【参考方案5】：

这是一个老问题，但我最近在 IE10 中无法获得正确的窗口高度几个像素。

我发现 IE10 默认应用 75% 的缩放，这会破坏窗口和文档的测量值。

因此，如果您得到错误的宽度或高度，请确保将缩放设置为 100%。

【讨论】：

【参考方案6】：