基于滚动条位置判断的简单实例


Posted in Javascript onDecember 14, 2017

实例如下所示:

//获取滚动条距离顶部位置
function getScrollTop() {
 var scrollTop = 0;
 if (document.documentElement && document.documentElement.scrollTop) {
  scrollTop = document.documentElement.scrollTop;
 } else if (document.body) {
  scrollTop = document.body.scrollTop;
 }
 return scrollTop;
}
//获取当前可视范围的高度
function getClientHeight() {
 var clientHeight = 0;
 if (document.body.clientHeight && document.documentElement.clientHeight) {
  clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
 } else {
  clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
 }
 return clientHeight;
}
//获取文档完整的高度
function getScrollHeight() {
 return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
//判断滚动条是否达到底部
getScrollTop() + getClientHeight() == getScrollHeight()

以上这篇基于滚动条位置判断的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
Prototype源码浅析 Number部分
Jan 16 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
Vue.js学习示例分享
Feb 05 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 #Javascript
ES6/JavaScript使用技巧分享
Dec 14 #Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 #Javascript
浅析JS抽象工厂模式
Dec 14 #Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 #Javascript
利用Javascript开发一个二维周视图日历
Dec 14 #Javascript
浅谈es6 javascript的map数据结构
Dec 14 #Javascript
You might like
PHP5 安装方法
2007/01/15 PHP
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
分享10段PHP常用代码
2015/11/11 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
asp.net和php的区别点总结
2019/10/10 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
javascript 文档的编码问题解决
2009/03/01 Javascript
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
浅谈javascript的调试
2015/01/28 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
Python实现数据库并行读取和写入实例
2017/06/09 Python
Python 多核并行计算的示例代码
2017/11/07 Python
Python实现购物车购物小程序
2018/04/18 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
python3中eval函数用法使用简介
2019/08/02 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
美德少年事迹材料
2014/01/23 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
简历中自我评价范文
2015/03/11 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
试用期转正工作总结2015
2015/05/28 职场文书