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

  • 相关阅读:
    红黑树的修正过程
    配置文件elasticsearch.yml详解
    HEAD插件安装
    css reset.css
    vue-router之router-link
    vue2.0 代码功能片段
    vue2.0的常用功能简介
    electron 的中文文档的地址 以及 窗口改变的步骤
    ph 的使用步骤
    git 提交的步骤
  • 原文地址:https://www.cnblogs.com/youxin/p/2970112.html
Copyright © 2011-2022 走看看