判断滚动条到底部的JS代码

 更新时间:2013年11月04日 16:53:53   作者:  
这篇文章介绍了判断滚动条到底部的JS代码,有需要的朋友可以参考一下

判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。

scrollTop为滚动条在Y轴上的滚动距离。

clientHeight为内容可视区域的高度。

scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。

从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

废话不多少说,赶紧上代码(兼容不同的浏览器)。


 

复制代码 代码如下:

//滚动条在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;
  if(document.compatMode == "CSS1Compat"){
    windowHeight = document.documentElement.clientHeight;
  }else{
    windowHeight = document.body.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");
  }
});

如果要判断在某一个元素中的滚动条是否到底部,根据类似的思想,将document.body换成特定的元素即可,获取scrollTop和scrollHeight的方式是一样的,但是获取元素可见高度需要用到offsetHeight属性,直接依葫芦画瓢即可。

相关文章

  • JavaScript中常见的高阶函数总结

    JavaScript中常见的高阶函数总结

    JavaScript的函数其实都指向某个变量,既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数,这篇文章主要给大家介绍了关于JavaScript中常见的高阶函数,需要的朋友可以参考下
    2022-02-02
  • JS实现jQuery的append功能

    JS实现jQuery的append功能

    jQuery中可以直接使用$el.append()为元素添加字符串型dom, 但是最近转战Vue, 再使用jQuery明显不合适了, 所以通过查找资料, 封装一个可以实现同样效果的方法.
    2021-05-05
  • Node.js API详解之 zlib模块用法分析

    Node.js API详解之 zlib模块用法分析

    这篇文章主要介绍了Node.js API详解之 zlib模块用法,结合实例形式分析了Node.js API中zlib模块基本功能、函数使用方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • JavaScript随机生成信用卡卡号的方法

    JavaScript随机生成信用卡卡号的方法

    这篇文章主要介绍了JavaScript随机生成信用卡卡号的方法,涉及javascript操作随机随机数生成信用卡卡号的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • 100个不能错过的实用JS自定义函数

    100个不能错过的实用JS自定义函数

    本文收集了100个原生态JavaScript编写的常用、实用自定义函数,需要的朋友可以参考下
    2014-03-03
  • bootstrap flask登录页面编写实例

    bootstrap flask登录页面编写实例

    这篇文章主要为大家详细介绍了bootstrap flask登录页面编写实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • uni-app开发案例之video视频组件

    uni-app开发案例之video视频组件

    最近uni-app使用video组件碰到的一系列问题,所以下面这篇文章主要给大家介绍了关于uni-app开发案例之video视频组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • 详解JavaScript中关于this指向的4种情况

    详解JavaScript中关于this指向的4种情况

    这篇文章主要介绍了JavaScript中关于this指向的4种情况,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • js实现无限层级树形数据结构(创新算法)

    js实现无限层级树形数据结构(创新算法)

    这篇文章主要介绍了js实现无限层级树形数据结构,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 通过js判断访客显示器屏幕分辨率并给出提示

    通过js判断访客显示器屏幕分辨率并给出提示

    这段代码大意是通过比较图片分辨率和桌面分辨率来判定改图是否适合直接用作访客的桌面壁纸
    2013-07-07

最新评论