判断滚动条到底部的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属性,直接依葫芦画瓢即可。

相关文章

  • element-ui 上传图片后标注坐标点

    element-ui 上传图片后标注坐标点

    有个组件库的名称叫做element-ui,基于Vue2.0开发,提供了丰富的PC端组件,本文通过实例代码给大家介绍element-ui 上传图片后标注坐标点的示例代码,感兴趣的朋友跟随小编一起看看吧
    2021-07-07
  • 学习JavaScript鼠标响应事件

    学习JavaScript鼠标响应事件

    这篇文章主要带领大家学习JavaScript鼠标响应事件,为大家分享了一个简单的鼠标模拟案例,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • JS获取多维数组中相同键的值实现方法示例

    JS获取多维数组中相同键的值实现方法示例

    这篇文章主要介绍了JS获取多维数组中相同键的值实现方法,结合实例形式分析了JS数组遍历、判断、键值获取等操作技巧,需要的朋友可以参考下
    2017-01-01
  • js中通过split函数分割字符串成数组小例子

    js中通过split函数分割字符串成数组小例子

    分割字符串成数组的方法有很多,不过使用最多的还是split函数,接下来为大家介绍下它的具体使用方法,感兴趣的朋友可以参考下
    2013-09-09
  • JavaScript实现数组对象转换为键值对的四种方式

    JavaScript实现数组对象转换为键值对的四种方式

    本文探讨了将包含 {icon: "abc", url: "123"} 形式对象的数组转换为键值对形式的四种方法,并从实现方式的简洁性、可读性和性能角度进行了分析比较,感兴趣的朋友可以参考下
    2024-02-02
  • JavaScript中new关键字的使用详解

    JavaScript中new关键字的使用详解

    在 JavaScript 中,new 关键字不仅是面向对象编程的关键要素,还是创建实例的重要手段,本文将深入探讨 new 关键字的使用,理解它在对象创建和构造函数调用中的作用,需要的朋友可以参考下
    2023-11-11
  • js用Date对象的setDate()函数对日期进行加减操作

    js用Date对象的setDate()函数对日期进行加减操作

    在某个日期上加减天数来说,其实只要调用Date对象的setDate()函数就可以了,具体方法如下
    2014-09-09
  • webpack自动打包和热更新的实现方法

    webpack自动打包和热更新的实现方法

    这篇文章主要介绍了webpack自动打包和热更新的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • ES6新语法Object.freeze和Object.seal基本使用

    ES6新语法Object.freeze和Object.seal基本使用

    这篇文章主要为大家介绍了ES6新语法Object.freeze和Object.seal基本使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • Bootstrap每天必学之日期控制

    Bootstrap每天必学之日期控制

    Bootstrap每天必学之日期控制,对Bootstrap日期控制感兴趣的小伙伴们可以参考一下
    2016-03-03

最新评论