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


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实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
Echarts.js无法引入问题解决方案
Oct 30 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实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python3实现Web网页图片下载
2016/01/28 Python
Python3 中文文件读写方法
2018/01/23 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
python实现教务管理系统
2018/03/12 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
python里dict变成list实例方法
2019/06/26 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
如何卸载python插件
2020/07/08 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
大学生党员自我批评
2014/02/14 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
mysq启动失败问题及场景分析
2021/07/15 MySQL