欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery实现判断滚动条滚动到document底部的方法分析

程序员文章站 2022-09-07 08:00:19
本文实例讲述了jquery实现判断滚动条滚动到document底部的方法。分享给大家供大家参考,具体如下: 滚动条没有实际的高度。只是为了呈现效果才在外型上面有长度。...

本文实例讲述了jquery实现判断滚动条滚动到document底部的方法。分享给大家供大家参考,具体如下:

滚动条没有实际的高度。只是为了呈现效果才在外型上面有长度。

在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");
  }
});

代码测试有效果。

感兴趣的朋友可以使用在线html/css/javascript代码运行工具http://tools.jb51.net/code/htmljsrun测试上述代码运行效果。