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


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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
学习ExtJS fit布局使用说明
Oct 08 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
js实现模拟购物商城案例
May 18 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
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
python中的闭包用法实例详解
2015/05/05 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
消防安全管理制度
2014/02/01 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书