判断滚动条到底部的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代码编写需要注意的7个小细节小结

    javascript代码编写需要注意的7个小细节小结

    每种语言都有它特别的地方,对于JavaScript来说,使用var就可以声明任意类型的变量,这门脚本语言看起来很简单,然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学者应该注意的七个细节,与大家分享。
    2011-09-09
  • JavaScript实现自定义拖拽排序列表

    JavaScript实现自定义拖拽排序列表

    在Web开发中,拖拽排序是一个常见的需求,它允许用户通过拖拽的方式重新排列列表项的顺序,本文将介绍如何使用原生JavaScript实现这一功能,需要的可以了解下
    2024-01-01
  • JavaScript中如何判断一个值是否为Null

    JavaScript中如何判断一个值是否为Null

    我们在开发的时候经常会判断一个null值,那么我们该如何去判断呢?下面这篇文章主要给大家介绍了关于JavaScript中如何判断一个值是否为Null的相关资料,需要的朋友可以参考下
    2023-12-12
  • js怎么覆盖原有方法实现重写

    js怎么覆盖原有方法实现重写

    这篇文章主要介绍了js怎么覆盖原有方法实现重写,需要的朋友可以参考下
    2014-09-09
  • javascript中为某个元素指定事件的三种方式

    javascript中为某个元素指定事件的三种方式

    在javascript中,可以为某个元素指定事件,指定的方式有以下三种使用onclick属性,使用addEvenListener()方法
    2014-08-08
  • 15个非常实用的JavaScript代码片段

    15个非常实用的JavaScript代码片段

    这篇文章主要为大家详细介绍了15个非常实用的JavaScript代码片段,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • js中class的点击事件没有效果的解决方法

    js中class的点击事件没有效果的解决方法

    下面小编就为大家带来一篇js中class的点击事件没有效果的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JS动画定时器知识总结

    JS动画定时器知识总结

    这篇文章给大家总结了关于JS动画中定时器的相关用法以及相关知识点总结,有需要的朋友可以参考学习下。
    2018-03-03
  • bootstrap折叠调用collapse()后data-parent不生效的快速解决办法

    bootstrap折叠调用collapse()后data-parent不生效的快速解决办法

    今天做的项目,用到了bootstrap的折叠功能,这个功能需要只展开一个折叠框,点击一个就会自动隐藏另一个,实现起来也很容易,但是在测试时同事提出了一个bug,怎么解决呢?今天小编通过本教程给大家分享下
    2017-02-02
  • javascript阻止浏览器后退事件防止误操作清空表单

    javascript阻止浏览器后退事件防止误操作清空表单

    由于误操作比较多,有时没有选中文本框,然后不小心按了退格之后,刚刚辛苦填好的表单就什么也后退的没有了,针对这个问题,本文给出了详细的解决方法,需要朋友不要错过
    2013-11-11

最新评论