24

我有一个页面，当用户滚动到底部时，我需要动态加载 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 失败，但不知道那会是什么。

4

7 回答 7

80

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

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

于 2012-10-08T18:58:38.527 回答
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');
    }

});
于 2012-10-08T19:17:25.687 回答
3

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

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

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

于 2013-03-27T14:51:55.307 回答
2

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

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

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

于 2014-04-27T07:50:47.667 回答
0

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

为什么 $(window).height() 这么错误？

于 2012-10-08T18:58:16.140 回答
0

由于 jquery（以及一般的 dom）在 quirksmode 中没有正确计算大小，因此有两种解决方案：

  1. 在页面顶部添加 doctype html（如“正确”答案中所述），或
  2. 如果第一个选项不是选项，请使用 window.innerHeight、window.innerWidth。

希望能帮助到你。

于 2015-08-13T02:54:04.070 回答
0

我将脚本从页脚移到了页脚，这为我解决了问题。

于 2017-10-27T22:57:47.890 回答