判断滚动条到底部的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 相关文章推荐
jquery ajax 登录验证实现代码
Sep 23 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
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
截获网站title标签之家内容的例子
2006/10/09 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
python机器人行走步数问题的解决
2018/01/29 Python
Python环境管理virtualenv&virtualenvwrapper的配置详解
2020/07/01 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
回门宴新郎答谢词
2014/01/12 职场文书
销售主管岗位职责
2014/02/08 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
2014年评职称工作总结
2014/11/20 职场文书
死亡诗社观后感
2015/06/05 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
MYSQL 表的全面总结
2021/11/11 MySQL