判断滚动条到底部的JS代码
这篇文章介绍了判断滚动条到底部的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){ // www.jbxue.com
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"); // www.jbxue.com
}
});

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

posted on 2013-11-05 06:54 snowfly123 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/linuxnotes/p/3407828.html

判断滚动条到底部的JS代码相关推荐

  1. JS判断滚动条到底部

    form:http://www.uphtm.com/js/269.html判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. sc ...

  2. js判断PC端或是移动端、判断是不是微信浏览器、js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本

    ** js判断PC端或是移动端 ** 第一种 window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator ...

  3. 在vue中如何判断滚动条到达底部

    mounted(){//在生命周期函数mounted中console.log(this.$refs.veriface,'智能切分滚动组件实例')//具有滚动条的dom元素,this.$refs.ver ...

  4. JS如何判断滚动条是否滚到底部

    JS如何判断滚动条是否滚到底部 背景 解决方案(以纵向滚动条为例,横向滚动条方法类似) 背景 通常我们需要判断滚动条是否滚到底部,以实现相应的功能,如"加载更多"等. 那么如何通过 ...

  5. Python+Selenium UI自动化 - 调用JS代码

    当webdriver遇到无法完成的操作时候,这个时候可以使用javascript来完成,webdriver提供了execute_script()接口来调用js代码. 执行js有两种场景: 1.在页面上 ...

  6. js实现判断滚动条滚到页面底部并执行事件的方法

    这里我主要介绍JS实现判断滚动条滚到页面底部并执行事件的方法: 需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个 ...

  7. jquery判断div滚动条到底部

    jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop.scrollLeft.scrollHeight.其中 scrollHeight 属性,互联网上几乎搜 ...

  8. HTML判断客户端,JS代码判断客户端是手机访问还是PC电脑访问

    这篇文章主要为大家详细介绍了JS代码判断客户端是手机访问还是PC电脑访问,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 前面给大家讲了<PHP判断判访问设 ...

  9. 判断是否移动端设备的JS代码,超短,百度都用它

    为什么80%的码农都做不了架构师?>>>    大多数人都使用跳转适配的方式实现PC端到移动端的网页转换,而大多数人又是使用通过判断UA的方法来区分PC端还是移动端,思路一样,但代码 ...

  10. firefox 复制文本js代码。判断窗口是关闭还是刷新

    判断窗口是关闭还是刷新  <script>  function window.onbeforeunload(){  with(window.event)if(clientY<0&am ...

最新文章

  1. Nature子刊评论:2020年后,微生物组将如何发展?
  2. 饿了么四年、阿里两年:研发路上的一些总结与思考
  3. python 中 sorted() 和 list.sort() 的用法
  4. 每次输出日志前需要判断日志的级别吗?
  5. android源码编译 简书,android学习笔记之源码编译
  6. Spring Cloud Netflix Eureka 配置参数说明
  7. rar 文件头crc版本_php实现rar文件的读取和解压
  8. linux空指针异常能捕获到吗,一次kernel panic分析--空指针in handle_IRQ_event
  9. mybatis应用(二)注解的实现
  10. 基础拾遗------泛型详解
  11. oracle 次月,Oracle日期查询:季度、月份、星期等时间信息
  12. python的计算_python 计算方位角实例(根据两点的坐标计算)
  13. oracle行列互换sql,解决Oracle行列转换问题的一个方法
  14. 程序员的传奇“破圈”之路
  15. C语言中写一个函数返回参数二进制中 1 的个数
  16. The Past Mistake is the Future Wisdom: Error-driven ContrastiveProbability Optimization for Chinese
  17. 构建可扩展的思科互联网络---多区域OSPF
  18. VMware16的下载安装及搭建Linux环境
  19. linux 图片转视频教程,如何在Ubuntu上转换图像、音频和视频格式
  20. flash电脑安装包_电脑上如何播放swf文件

热门文章

  1. docker导入导出
  2. ArcGIS API for JavaScript与 npm
  3. maven -maven.test.skip skipTests
  4. PE格式第四讲,数据目录表之导入表,以及IAT表
  5. 详解没有dSYM文件 如何解析iOS崩溃日志
  6. Vue开发系列三 调试
  7. postgresql某进程占用cpu资源过高,降不下来
  8. 花匠(NOIP2013)(神奇纯模拟)
  9. 我也是不得不说我的学习能力下降了,这两天都没有完成一个模块
  10. Dreamweaver的jquery插件