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


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 相关文章推荐
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
JavaScript实现信用卡校验方法
Apr 07 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
分析JS单线程异步io回调的特性
Dec 01 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
vue 中url 链接左边的小图标更改问题
Dec 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
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
PHP 定界符 使用技巧
2009/06/14 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
PHP5常用函数列表(分享)
2013/06/07 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
php实现aes加密类分享
2014/02/16 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
php生成gif动画的方法
2015/11/05 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
Python实现包含min函数的栈
2016/04/29 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
python plotly绘制直方图实例详解
2019/07/22 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
数据库测试通常都包括哪些方面
2015/11/30 面试题
优秀团员个人的自我评价
2013/10/02 职场文书
大学生优秀团员事迹材料
2014/01/30 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
话题作文之成长
2019/12/09 职场文书
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript