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


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中的集合及效率
Jan 08 Javascript
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
微信小程序实现动态设置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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
PHP脚本的10个技巧(1)
2006/10/09 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
PHP进程同步代码实例
2015/02/12 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
BOM与DOM的区别分析
2010/10/26 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
python 链接和操作 memcache方法
2017/03/04 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
python求最大值最小值方法总结
2019/06/25 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
python numpy 反转 reverse示例
2019/12/04 Python
Django choices下拉列表绑定实例
2020/03/13 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
一个大学生十年的职业规划
2014/01/17 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
python基础之匿名函数详解
2021/04/21 Python
Nginx 匹配方式
2022/05/15 Servers