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


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 相关文章推荐
读取input:file的路径并显示本地图片的方法
Sep 23 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
微信小程序实现动态设置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数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
php创建sprite
2014/02/11 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
详解Django框架中用context来解析模板的方法
2015/07/20 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
中学生自我评价范文
2014/02/08 职场文书
2014年财政工作总结
2014/12/10 职场文书
大学生团员个人总结
2015/02/14 职场文书
同事离别感言
2015/08/04 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书