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


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代码
Dec 24 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
深入理解javascript变量声明
Nov 20 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
js实现每日签到功能
Nov 29 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 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 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
jquery实现图片翻页效果
2013/12/23 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
JS前端笔试题分析
2016/12/19 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
js实现简易ATM功能
2020/10/27 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
Python列表append和+的区别浅析
2015/02/02 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
Django配置文件代码说明
2019/12/04 Python
如何用python处理excel表格
2020/06/09 Python
python raise的基本使用
2020/09/10 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
测绘工程专业个人自我评价
2013/12/01 职场文书
酒店副总岗位职责
2013/12/24 职场文书
人力资源经理自我评价
2014/01/04 职场文书
大型活动策划方案
2014/01/12 职场文书
优秀教师先进事迹
2014/01/22 职场文书
简历自荐信范文
2015/03/09 职场文书
八年级语文教学反思
2016/03/03 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript