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


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 相关文章推荐
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
js canvas实现擦除动画
Jul 16 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
uin-app+mockjs实现本地数据模拟
Aug 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
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
百度地图API使用方法详解
2015/08/25 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
jquery 插件学习(三)
2012/08/06 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
Python NumPy库安装使用笔记
2015/05/18 Python
python添加模块搜索路径方法
2017/09/11 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
jupyter实现重新加载模块
2020/04/16 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
企业行政文员岗位职责
2013/12/03 职场文书
工作评语大全
2014/04/26 职场文书
导师工作推荐信范文
2014/05/17 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
2014年团队工作总结
2014/11/24 职场文书
事业单位岗位说明书
2015/10/08 职场文书
如何书写授权委托书?
2019/06/25 职场文书