判断滚动条到底部,需要用到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属性,直接依葫芦画瓢即可。

JS如何判断滚动条是否滚到底部的更多相关文章

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

    需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那 ...

  2. jquery判断滚动条是否到底部

    clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight ...

  3. JS 原生JS 判断滚动条滑动到底部

    window.addEventListener("scroll", function(event) { var scrollTop = document.documentEleme ...

  4. JS 原生JS 判断滚动条滑动到底部(兼容苹果safari)

    ListenerScoller () { var pageIndex = 1; var startX, startY; document.addEventListener('touchstart',f ...

  5. JQuery 判断滚动条是否到底部

    BottomJumpPage: function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).he ...

  6. JS JQUERY实现滚动条自动滚到底的方法

    $(function(){ var h = $(document).height()-$(window).height(); $(document).scrollTop(h); }); \ windo ...

  7. JS判断滚动条到底部,页面是否有滚动条

    要判断页面滚动条是否到底,需要了解三个属性: scrollHeight:获取元素内容高度的度量,包括由于溢出导致的视图中不可见内容,说直白点,算上了滚动条不可见的那部分高度. clientHeight ...

  8. 判断滚动条到底部的JS代码

    这篇文章介绍了判断滚动条到底部的JS代码,有需要的朋友可以参考一下 判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrol ...

  9. js判断滚动条是否已到页面最底部或顶部实例

    原文 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐 ...

随机推荐

  1. LeetCode第五天

    leetcode 第五天 2018年1月6日 22.(566) Reshape the Matrix JAVA class Solution { public int[][] matrixReshap ...

  2. QWebSocket 客户端

    QWebSocket 客户端 Public Function - QWebSocket(const QString &origin = QString(),QWebSocketProtocol ...

  3. Qt 如何使用 QImage 设置指定的颜色为透明色?

    Qt 如何使用 QImage 设置指定的颜色为透明色? 需求背景:使用华大身份证读卡器模块读取身份证信息,通过模块读取的图片为 *.BMP 格式,无透明色,故绘制到身份证上无法美观的显示. 通过查询身 ...

  4. Java文件及文件夹的创建与删除

    功能 这个实例实现了在D盘创建一个文件和文件夹,并删除它们. 函数介绍 createNewFile():当文件不存在时,根据绝对路径创建该文件.     delete():删除文件或者文件夹.     ...

  5. 我博客上的围棋js程序

    作为一个围棋爱好者,就决定在博客里加个围棋js程序.于是,申请了博客的js权限,美化美化我的博客. 好在js的语法像C系的,看了看,写个程序应该还是可以的. 围棋里,设计好基本的数据结构: //a是1 ...

  6. 用线性单元(LinearUnit)实现工资预测的Python3代码

    功能:通过样本进行训练,让线性单元自己找到(这就是所谓机器学习)工资计算的规律,然后用两组数据进行测试机器是否真的get到了其中的规律. 原文链接在文尾,文章中的代码为了演示起见,仅根据工作年限来预测 ...

  7. tcp/ip 卷一 读书笔记(5)arp和rarp 同网段和不同网段之间的通信过程

    arp和rarp 同网段和不同网段之间的通信过程 IPv6中已经没有arp rarp协议,所以这里都是IPv4. 链路层使用以太网地址来确定目的地址,应用则常使用ip地址通信 arp协议是指从ip地址 ...

  8. jquery源码分析之一前言篇

    1.问:jquery源码分析的版本是什么? 答:v3.2.1 2.问:为什么要分析jquery源码? 答:javascript是一切js框架的基础,jquery.es6.vue.angular.rea ...

  9. shell脚本 awk工具

    awk工具概述awk编程语言/数据处理引擎基于模式匹配检查输入文本,逐行处理并输出通常在shell脚本中,或取指定的数据单独用时,可对文本数据做统计 命令格式格式一:awk [选项] '[条件]{编辑 ...

  10. Windows2003查看远程桌面连接的用户

    要查看通过远程连接windows2003的用户,则打开任务管理器,切换到“用户”选项卡上进行查看.