zoukankan      html  css  js  c++  java
  • javascript和Jquery判断是否滚动到底部

    javascript判断滚动到窗口的底部:

    window.onscroll=function(){
        var sHeight=document.documentElement.scrollTop||document.body.scrollTop;//滚动高度
        var wHeight=document.documentElement.clientHeight;//window 
        var dHeight=document.documentElement.offsetHeight;//整个文档高度
        if(dHeight-(sHeight+wHeight)<100)
        {
            loading();
            
        }
        
    };

    第一个后面的主要是为了ie:

    一个判断滚动条是否滚动到底部的js。实际运用可以把clientHeight和scrollHeight放在方法外面,因为这两个值是不变的,没必要每次都进行计算。IE,FF,Opera,Chrome,Safari均可用。
    
    function reachBottom() {
        var scrollTop = 0;
        var clientHeight = 0;
        var scrollHeight = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop;
        } else if (document.body) {
            scrollTop = document.body.scrollTop;
        }
        if (document.body.clientHeight && document.documentElement.clientHeight) {
            clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
        } else {
            clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
        }
        scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
        if (scrollTop + clientHeight == scrollHeight) {
            return true;
        } else {
            return false;
        }
    }

    jquery 判断是否到底:

    body{
        height:900px;
    }
    
        
    
    </style>
    <script type="text/javascript">
    $(function(){
        var i=0;
        $("#div").append($(document).height()+' '+$(window).height()+' '+$(document).scrollTop()+"<br/>");
        $(window).scroll(function(){
            i++;
            $("#div").append(i+'  '+$(document).height()+' '+$(window).height()+' '+$(document).scrollTop()+"<br/>");
             console.log( $(document).height()+' '+$(window).height()+' '+$(document).scrollTop());
            if(  $(document).height() -( $(window).height()+$(document).scrollTop() )<50 )
            {
                alert("到底了");
            }
        });
    });

    测试:

    body设置为900px; 没滚动时显示

    document.height   window.height  scrollTop

    929 643 0

    body设置1000,显示

    1029 643 0

    643是我window的高度,即可以显示的区域。

    可以利用上面的代码进行多次测试。

    判断div内的div是否滚动到底部: 

    <script type="text/javascript">
    window.onload=function(){
        var obj=document.getElementById("div1");
        obj.onscroll=function()
         {
             console.log(obj.scrollHeight+' '+obj.scrollTop+' '+obj.style.height+"<br/>");
             if(obj.scrollHeight-(obj.scrollTop+parseInt(obj.style.height))<20 )
             {
                 alert("到底了");
             }
         }
         
    };
        
    </script>
    </head>
    
    <body>
     
    <div id="div1" style="500px;height:400px;border:2px solid red;overflow:auto;">//外部用overflow
    
         <div style="height:900px;100%;">
          hello hello hello hello
           hellohello hello hello hello
           hellohello hello hello hello
           hellohello hello hello hello
           hellohello hello hello hello
           hellohello hello hello hello
           hellohello hello hello hello
           hellohello hello hello hello
           hellohello hello hello hello
           hellohello hello hello hello
           hellohello hello hello hello
            
         </div>
         
     </div>
     
       
    </div>
    </body>

    刚开始输出是:

    900 0 400px; 主要obj.style.height输出的是px

    中间的向下滚动时增大,其他2个不变。

     还可以参考以前的:

    http://www.cnblogs.com/youxin/archive/2013/03/02/2940305.html

  • 相关阅读:
    能登陆QQ ping通外网 但打不开网页
    代码大全书写子程序要注意的几个问题?
    代码大全创建子程序的正当理由
    原创 插入排序算法
    堆结构的实现
    代码大全子程序层上的设计
    五十。java
    四十七。java
    四十九。java
    五十二。java
  • 原文地址:https://www.cnblogs.com/youxin/p/2970112.html
Copyright © 2011-2022 走看看