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


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对表单的操作代码集合
Apr 06 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
javascript中的面向对象
Mar 30 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
一个PHP+MSSQL分页的例子
2006/10/09 PHP
黑夜路人出的几道php笔试题
2009/08/04 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
Javascript基础教程之if条件语句
2015/01/18 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
js+html5实现侧滑页面效果
2017/07/15 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
微信小程序云开发之使用云函数
2019/05/17 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
实习医生自我评价
2013/09/22 职场文书
自我评价范文点评
2013/12/04 职场文书
五五普法心得体会
2014/09/04 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
幼儿教师个人总结
2015/02/05 职场文书
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫