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


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 相关文章推荐
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
javascript学习笔记(五)正则表达式
Apr 08 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
jquery实现下载图片功能
Jul 18 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
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
Python多层装饰器用法实例分析
2018/02/09 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
车间操作工岗位职责
2013/12/19 职场文书
营销团队口号
2014/06/06 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
2014年销售工作总结
2014/12/01 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android