JS判断滚动条到底部
form:http://www.uphtm.com/js/269.html判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。
scrollTop为滚动条在Y轴上的滚动距离。
clientHeight为内容可视区域的高度。
scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。
从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。
代码如下(兼容不同的浏览器)。
//滚动条在Y轴上的滚动距离 function getScrollTop(){var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;if(document.body){bodyScrollTop = document.body.scrollTop;}if(document.documentElement){documentScrollTop = document.documentElement.scrollTop;}scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;return scrollTop; }//文档的总高度 function getScrollHeight(){var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;if(document.body){bodyScrollHeight = document.body.scrollHeight;}if(document.documentElement){documentScrollHeight = document.documentElement.scrollHeight;}scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;return scrollHeight; } //浏览器视口的高度 function getWindowHeight(){var windowHeight = 0;if(document.compatMode == "CSS1Compat"){windowHeight = document.documentElement.clientHeight;}else{windowHeight = document.body.clientHeight;}return windowHeight; } window.onscroll = function(){if(getScrollTop() + getWindowHeight() == getScrollHeight()){alert("已经到最底部了!!");} };
如果用jquery来实现的话就更简单了,
- $(window).scroll(function(){
- var scrollTop = $(this).scrollTop();
- var scrollHeight = $(document).height();
- var windowHeight = $(this).height();
- if(scrollTop + windowHeight == scrollHeight){
- alert("已经到最底部了!");
- }
- });
如果要判断在某一个元素中的滚动条是否到底部,根据类似的思想,将document.body换成特定的元素即可,获取scrollTop和scrollHeight的方式是一样的,但是获取元素可见高度需要用到offsetHeight属性,直接依葫芦画瓢即可。form:http://www.uphtm.com
转载于:https://www.cnblogs.com/coolhtm/p/4435853.html
JS判断滚动条到底部相关推荐
- JS获取滚动条到底部得距离
// 监听滚动 FirstPage 是父组件传过来的值 判断调用哪个的 addEvent() {window.addEventListener('scroll',this.type == 'First ...
- JS方法篇:vue.js判断滚动条触底
mounted(){window.addEventListener('scroll', this.handleScroll) // 监听页面滚动 }, methods:{// 获取页面滚动距离hand ...
- JS 获取滚动条到底部得距离
$(window).scroll(function() {// 变量 scrollHeight 是滚动条的总高度let scrollHeight = document.documentElement. ...
- js自动滚动条在底部
<SCRIPT> //自动滚动到页面底部js function aaa() { this.scroll(0,65000) ;//滚动条滚动相应坐标 setTimeout("aaa ...
- 在vue中如何判断滚动条到达底部
mounted(){//在生命周期函数mounted中console.log(this.$refs.veriface,'智能切分滚动组件实例')//具有滚动条的dom元素,this.$refs.ver ...
- JS如何判断滚动条是否滚到底部
JS如何判断滚动条是否滚到底部 背景 解决方案(以纵向滚动条为例,横向滚动条方法类似) 背景 通常我们需要判断滚动条是否滚到底部,以实现相应的功能,如"加载更多"等. 那么如何通过 ...
- js判断iPhone X,适配底部被小黑条遮挡问题
如果是iPhoneX等手机,底部有小黑条会遮挡底部的按钮 方法一:js判断, 给底部加padding适配. $(document).ready(function () {isIPhoneX();fun ...
- js实现判断滚动条滚到页面底部并执行事件的方法
这里我主要介绍JS实现判断滚动条滚到页面底部并执行事件的方法: 需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个 ...
- js判断div滚动条是否滚动到底部
1.设置div固定高度,并且设置为内部超出可滚动 2.获取div标签,并获取div滚动距离顶部的高度 3.获取div的高度,如果没有给div设置高度可获取视图窗口的高度 4.获取div标签滚动高度 4 ...
最新文章
- Autocomplete 自动补全(Webform实战篇)
- 如何分析apache日志[access_log(访问日志)和error_log(错误日志)]
- 在ABAP中将负号提前的方法
- Java并发编程的艺术(一)——并发编程需要注意的问题
- Python之深入解析如何制作国际空间站实时跟踪器
- 前端绘制绘制图表_绘制图表(第2页):JavaScript图表库的比较
- 白盒测试不是测试,更不高级
- linux系统资格认证,Linux资格认证:Linux操作系统的运行级别
- 凝血超声手术室行业调研报告 - 市场现状分析与发展前景预测
- WCF透明代理类,动态调用,支持async/await
- 撩课-Web大前端每天5道面试题-Day4
- Java技术栈及重要点汇总(*)
- python初学火车座位判断_初学Python实现学校图书馆座位自动抢座预约
- 计算机应用基础(本)第4章答案,计算机应用基础第4章习题答案(江西省三校生).doc...
- TranUnet 复现[Errno 2] No such file or directory: ‘./model/TU_Synapse224/TU_pretrain_ViT-B_16_skip3_ep
- 你不得不熟悉且熟练掌握的前端知识
- 刘强东的代码水平如何?网友:当年一晚赚5万
- .NET程序集反编译器Reflector - 应用和平台 – 微软学生中心
- 九、用场效应管设计与门
- FreeSWITCH 语音识别 阿里云ASR 2.0接口 接口实现
热门文章
- 在php代码中加视频,php – 如何在laravel代码中嵌入视频
- c# tcp显示服务器图片,C# TCP通迅原码(服务器与客户端相互发送文本与图片)
- const与define相比优点_const与#define的区别、优点
- 计算机英语考试试题一附答案,计算机英语考试试题一附答案
- 输入引脚时钟约束_Happy Design in Vivado 系列:时序分析入门三板斧(一):创建时钟...
- mysql存储过程参数可选,如何在T-SQL存储过程中使用可选参数?
- flux java_FluxJava 新增 RxJava2 的支援功能
- linux 内核 config_localversion_auto,关于CONFIG_LOCALVERSION_AUTO设置去掉内核版本号SVN后缀...
- python install scikit-image后,报错ImportError: DLL load failed: 找不到指定的模块
- Python:KNN