form:http://www.uphtm.com/js/269.html判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。

scrollTop为滚动条在Y轴上的滚动距离。

clientHeight为内容可视区域的高度。

scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。

从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

代码如下(兼容不同的浏览器)。

  1. //滚动条在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来实现的话就更简单了,

  1. $(window).scroll(function(){
  2. var scrollTop = $(this).scrollTop();
  3. var scrollHeight = $(document).height();
  4. var windowHeight = $(this).height();
  5. if(scrollTop + windowHeight == scrollHeight){
  6. alert("已经到最底部了!");
  7. }
  8. });

如果要判断在某一个元素中的滚动条是否到底部,根据类似的思想,将document.body换成特定的元素即可,获取scrollTop和scrollHeight的方式是一样的,但是获取元素可见高度需要用到offsetHeight属性,直接依葫芦画瓢即可。form:http://www.uphtm.com

转载于:https://www.cnblogs.com/coolhtm/p/4435853.html

JS判断滚动条到底部相关推荐

  1. JS获取滚动条到底部得距离

    // 监听滚动 FirstPage 是父组件传过来的值 判断调用哪个的 addEvent() {window.addEventListener('scroll',this.type == 'First ...

  2. JS方法篇:vue.js判断滚动条触底

    mounted(){window.addEventListener('scroll', this.handleScroll) // 监听页面滚动 }, methods:{// 获取页面滚动距离hand ...

  3. JS 获取滚动条到底部得距离

    $(window).scroll(function() {// 变量 scrollHeight 是滚动条的总高度let scrollHeight = document.documentElement. ...

  4. js自动滚动条在底部

    <SCRIPT> //自动滚动到页面底部js function aaa() { this.scroll(0,65000) ;//滚动条滚动相应坐标 setTimeout("aaa ...

  5. 在vue中如何判断滚动条到达底部

    mounted(){//在生命周期函数mounted中console.log(this.$refs.veriface,'智能切分滚动组件实例')//具有滚动条的dom元素,this.$refs.ver ...

  6. JS如何判断滚动条是否滚到底部

    JS如何判断滚动条是否滚到底部 背景 解决方案(以纵向滚动条为例,横向滚动条方法类似) 背景 通常我们需要判断滚动条是否滚到底部,以实现相应的功能,如"加载更多"等. 那么如何通过 ...

  7. js判断iPhone X,适配底部被小黑条遮挡问题

    如果是iPhoneX等手机,底部有小黑条会遮挡底部的按钮 方法一:js判断, 给底部加padding适配. $(document).ready(function () {isIPhoneX();fun ...

  8. js实现判断滚动条滚到页面底部并执行事件的方法

    这里我主要介绍JS实现判断滚动条滚到页面底部并执行事件的方法: 需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个 ...

  9. js判断div滚动条是否滚动到底部

    1.设置div固定高度,并且设置为内部超出可滚动 2.获取div标签,并获取div滚动距离顶部的高度 3.获取div的高度,如果没有给div设置高度可获取视图窗口的高度 4.获取div标签滚动高度 4 ...

最新文章

  1. Autocomplete 自动补全(Webform实战篇)
  2. 如何分析apache日志[access_log(访问日志)和error_log(错误日志)]
  3. 在ABAP中将负号提前的方法
  4. Java并发编程的艺术(一)——并发编程需要注意的问题
  5. Python之深入解析如何制作国际空间站实时跟踪器
  6. 前端绘制绘制图表_绘制图表(第2页):JavaScript图表库的比较
  7. 白盒测试不是测试,更不高级
  8. linux系统资格认证,Linux资格认证:Linux操作系统的运行级别
  9. 凝血超声手术室行业调研报告 - 市场现状分析与发展前景预测
  10. WCF透明代理类,动态调用,支持async/await
  11. 撩课-Web大前端每天5道面试题-Day4
  12. Java技术栈及重要点汇总(*)
  13. python初学火车座位判断_初学Python实现学校图书馆座位自动抢座预约
  14. 计算机应用基础(本)第4章答案,计算机应用基础第4章习题答案(江西省三校生).doc...
  15. TranUnet 复现[Errno 2] No such file or directory: ‘./model/TU_Synapse224/TU_pretrain_ViT-B_16_skip3_ep
  16. 你不得不熟悉且熟练掌握的前端知识
  17. 刘强东的代码水平如何?网友:当年一晚赚5万
  18. .NET程序集反编译器Reflector - 应用和平台 – 微软学生中心
  19. 九、用场效应管设计与门
  20. FreeSWITCH 语音识别 阿里云ASR 2.0接口 接口实现

热门文章

  1. 在php代码中加视频,php – 如何在laravel代码中嵌入视频
  2. c# tcp显示服务器图片,C# TCP通迅原码(服务器与客户端相互发送文本与图片)
  3. const与define相比优点_const与#define的区别、优点
  4. 计算机英语考试试题一附答案,计算机英语考试试题一附答案
  5. 输入引脚时钟约束_Happy Design in Vivado 系列:时序分析入门三板斧(一):创建时钟...
  6. mysql存储过程参数可选,如何在T-SQL存储过程中使用可选参数?
  7. flux java_FluxJava 新增 RxJava2 的支援功能
  8. linux 内核 config_localversion_auto,关于CONFIG_LOCALVERSION_AUTO设置去掉内核版本号SVN后缀...
  9. python install scikit-image后,报错ImportError: DLL load failed: 找不到指定的模块
  10. Python:KNN