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


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版代码高亮
Jun 26 Javascript
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
在js中做数字字符串补0(js补零)
Mar 25 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
react的hooks的用法详解
Oct 12 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
Python快速从注释生成文档的方法
2016/12/26 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
工商管理系学生的自我评价分享
2013/11/29 职场文书
七匹狼男装广告词
2014/03/21 职场文书
初中教师个人工作总结
2015/02/10 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
python OpenCV学习笔记
2021/03/31 Python
Axios取消重复请求的方法实例详解
2021/06/15 Javascript