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


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中引用示例介绍
Feb 21 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
微信小程序实现动态设置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
第五节--克隆
2006/11/16 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
javascript 拖放效果实现代码
2010/01/22 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
详解Python中的正则表达式的用法
2015/04/09 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
在Python中COM口的调用方法
2019/07/03 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
python中的测试框架
2020/11/13 Python
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
《金子》教学反思
2014/04/13 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
python字符串常规操作大全
2021/05/02 Python
JS 基本概念详细介绍
2021/10/16 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
再谈python_tkinter弹出对话框创建
2022/03/20 Python