zoukankan      html  css  js  c++  java
  • 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">

  • 相关阅读:
    #JVM方法区、堆、栈’#
    #前端# 解决前端页面滑动不顺畅的问题
    【Web协议】服务器推送浏览器:Server-Sent Events(SSE)
    【性能调优】Java程序CPU高定位
    转载 I/O模型:BIO/NIO/AIO 学习
    【性能调优】Java程序内存高定位
    算法--字符串:最长回文子序列
    算法--字符串:最长递增子序列LIS
    算法--字符串:最长回文子串
    算法--字符串:最长公共子序列LCS
  • 原文地址:https://www.cnblogs.com/danlis/p/7081349.html
Copyright © 2011-2022 走看看