Jquery-无法有效获取当前窗口高度

今天碰到个很奇怪的事情,那就是滚动条往下滚动时候没有触发提示,反而是往上滚动的时候,触发了提示。百思不得其解,尤其是拿了美工大大的切图过来,一点问题都没有。

那么就进行console.log输出查看了。图一是异常的,图二正常的。按理windowHeight获取到的值应该如图二中的667而不是763,scrollHeight也不会是763而是在变化的。

 

              图1

 

              图2

 

<script>
        $(window).scroll(function () {
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(window).height();
            console.log("scrollTop:" + scrollTop)
            console.log("windowHeight:" + windowHeight)
            console.log("scrollHeight:" + scrollHeight)
            if (scrollTop + windowHeight == scrollHeight) {
                alert(1)
                //getNextCollection();//加载
            }
        });
    </script>

 

因为无法解释这个问题,就百度了

 查到的一个文档:

http://blog.csdn.net/playboyanta123/article/details/40054645 

以下为文档内容:

$(window).height()     获取的是当前可视窗口的高度,也就是用户能看到的窗口的高度,是不变的(在窗口大小不变的前提下)
$(document).height()  获取的是窗口内文档的高度,这个高度随着文档内容的高度改变而改变

当窗口滚动条滚到最低端时,$(document).height() == $(window).height() + $(window).scrollTop()。
当窗口内文档高度不足浏览器窗口高度时,$(document).height()返回的是$(window).height()。

$("body").height()   如果body没有border、margin的话,$("body").height()==$(document).height(),但是还是不建议使用这种方式去获取文档内容高度

PS:如果你发现$(window).height()值有问题,返回的不是浏览器窗口的高度,那么看看是不是网页没有加上<!DOCTYPE>声明。
如果没加的话网页会进入怪异模式,你懂的!

 

========================================================分割线=====================================================

 

那么造成这样怪异的原因就是,没有在头部添加<!DOCTYPE>声明。

这个声明一般创建的时候都有的好像。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

posted @ 2017-06-26 16:59  Danlis  阅读(1636)  评论(0编辑  收藏  举报