判断滚动条到底部,需要用到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. UVA - 1631 Locker 记忆化搜索

    题意:给定两个密码串,每次可以让1~3个相邻的密码向上或者向下滚动,每个密码是 ,问最少需要多少次滚动可以让原串成为目标串? 思路:假设当前要让第i位密码还原,我们可以同时转动,不同的转动方式会影响后 ...

  2. CEPH RGW 设置 user default_placement为ssd-placement,优化100KB-200KB小文件性能,使用户创建的bucket对象放置到 SSD设备的Pool上。

    sudo radosgw-admin metadata get user:tuanzi > user.md.json vi user.md.json #to add ssd-placement ...

  3. 一句Python,一句R︱pandas模块——高级版data.frame

    先学了R,最近刚刚上手python,所以想着将python和R结合起来互相对比来更好理解python.最好就是一句python,对应写一句R. pandas可谓如雷贯耳,数据处理神器. 以下符号: = ...

  4. Meet Python

    关于python 入门书<Head First Python>的一些读书笔记,用以备忘. 下载安装Python 下载地址: https://www.python.org/downloads ...

  5. My97 DatePicker图标触发

    My97 DatePicker图标触发 1.设计源码 <%@ page language="java" import="java.util.*" page ...

  6. INS-30002 口令和确认口令不同

    1.错误描述 2.错误原因 由截图上的提示,可以看出是管理口令和确认口令不一致 3.解决办法 重新输入密码

  7. C# 带偏移量自定义分页方法

    /// <summary> /// 带偏移量自定义分页方法 /// </summary> /// <param name="PageSize"> ...

  8. Http请求封装基类HttpHelper.cs

    HttpHelper请求封装基类,支持get请求和POS请求http接口交互,为后面接口交互做准备. 1.HttpHelper帮助基类 using System; using System.Colle ...

  9. C#简单工厂和抽象类的实例

    using System; using System.Collections.Generic; using System.Diagnostics; using System.IO; using Sys ...

  10. 畅通工程续 HDU - 1874

    某省自从实行了很多年的畅通工程计划后,终于修建了很多路.不过路多了也不好,每次要从一个城镇到另一个城镇时,都有许多种道路方案可以选择,而某些方案要比另一些方案行走的距离要短很多.这让行人很困扰. 现在 ...