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


Posted in Javascript onNovember 04, 2013

判断滚动条到底部,需要用到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 相关文章推荐
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
对layui中的onevent 和event的使用详解
Sep 06 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 #Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 #Javascript
jquery监听div内容的变化具体实现思路
Nov 04 #Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 #Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 #Javascript
浅析return false的正确使用
Nov 04 #Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 #Javascript
You might like
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
php截取字符串函数分享
2015/02/02 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
Python变量和字符串详解
2017/04/29 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
python计算日期之间的放假日期
2018/06/05 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
乐观大学生的自我评价
2014/01/10 职场文书
物流专业求职信
2014/06/30 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
干部理论学习心得体会
2016/01/21 职场文书