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


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 定义新对象方法
Feb 20 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
Jquery Fade用法详解
Nov 06 jQuery
使用refresh_token实现无感刷新页面
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
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
python动态文本进度条的实例代码
2020/01/22 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
教师试用期自我鉴定
2014/02/12 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
庆元旦活动总结
2014/07/09 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
2015年教师节慰问信
2015/03/23 职场文书
python析构函数用法及注意事项
2021/06/22 Python
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python