码迷,mamicode.com
首页 > 其他好文 > 详细

知识点:整个doucument而言如果判断滚动条滚动到底部

时间:2017-08-26 18:40:14      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:jquery   turn   on()   底部   tom   java   doc   判断   ons   

滚动条没有实际的高度。只是为了呈现效果才在外型上面有长度。
在js当中也没有提供滚动条的高度API。
参考了网上有关资料:判断滚动条到底部的基本逻辑是滚动条滚动的高度加上视口的高度,正好是document的高度,公式表示为
滚动条滚动的高度+浏览器视口的高度>=document的高度。
参考网上资料,具体代码如下:
//滚动条在Y轴上的滚动距离
    function getScrollTop() {  
        var scrollTop = 0,
            bodyScrollTop = 0,
            documentScrollTop = 0;
        //兼容谷歌
          
        if (document.body) {     bodyScrollTop = document.body.scrollTop;   }
        //兼容火狐
          
        if (document.documentElement) {     documentScrollTop = document.documentElement.scrollTop;   }

           scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;  
        return scrollTop;
    }
    //文档的总高度
    function getScrollHeight() {  
        var scrollHeight = 0,
            bodyScrollHeight = 0,
            documentScrollHeight = 0;
        //兼容谷歌
        if (document.body) {
            bodyScrollHeight = document.body.scrollHeight;   
        }
        //兼容火狐 
        if (document.documentElement) {
            documentScrollHeight = document.documentElement.scrollHeight;   
        }
        scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;  
        return scrollHeight;
    }
    //浏览器视口的高度
    function getWindowHeight() {  
        var windowHeight = 0;
        windowHeight = document.documentElement.clientHeight; 
        return windowHeight;
    }
    window.onscroll = function() {  
        if (getScrollTop() + getWindowHeight() == getScrollHeight()) {     
        	alert("you are in the bottom!");   
        }
    };
 
jquery实现代码:
$(window).scroll(function(){
  var scrollTop = $(this).scrollTop();
  var scrollHeight = $(document).height();
  var windowHeight = $(this).height();
  if(scrollTop + windowHeight == scrollHeight){
    alert("you are in the bottom");
  }
});

 

代码测试有效果。
 

知识点:整个doucument而言如果判断滚动条滚动到底部

标签:jquery   turn   on()   底部   tom   java   doc   判断   ons   

原文地址:http://www.cnblogs.com/zhensg123/p/7435890.html

(1)
(2)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!