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


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 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
javascript 打开页面window.location和window.open的区别
Mar 17 Javascript
运算符&&的三个不同层次
Apr 07 Javascript
javascript实现捕捉键盘上按下的键
May 05 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
JavaScript实现拖拽效果
Mar 16 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
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
xml和web特殊字符
2009/04/28 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
JS实现烟花爆炸效果
2020/03/10 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
详解React 条件渲染
2020/07/08 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
django加载本地html的方法
2018/05/27 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
python装饰器代码深入讲解
2021/03/01 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
C语言基础笔试题
2013/04/27 面试题
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
财务管理专业求职信
2014/06/11 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
nginx rewrite功能使用场景分析
2022/05/30 Servers