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

offsetHeight:是指元素内容的高度。依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分。

scrollTop:滚动条已经滚动的当前值.

举例,如果一个DIV高度是400px(即clientHeight为400),而里面的内容是一个很长的列表,内容的高度是1000px(即offsetHeight为1000)。那么,可见部分我们看到400px,1000px的内容中还有600px不可见。而这不可见的部分呢,正是我们通过拉动滚动条才能把这一部分显示出来。你如果滚动条不拉动,此时scrollTop为0,如果你把滚动条拉到底,显示出列表最下面的部分,此时,scrollTop为600。 所以scrollTop的取值区间为[0, 600]。 所以这个600可以理解为滚动条可以滚动的长度。

理解完上面的这个概念之后。要判断是否滚动到底部就很好做了。

首先,我们拉动滚动条,从最上面拉到最下面,变化的是scrollTop的值,而这个值是有一个区间的。
这个区间是: [0, (offsetHeight - clientHeight)]
即,滚动条拉动的整个过程的变化在 0 到 (offsetHeight – clientHeight) 范围之内。

1、判断滚动条滚动到最底端: scrollTop == (offsetHeight – clientHeight)
2、在滚动条距离底端50px以内: (offsetHeight – clientHeight) – scrollTop <= 50
3、在滚动条距离底端5%以内: scrollTop / (offsetHeight – clientHeight) >= 0.95

function uiIsPageBottom() {
var scrollTop = 0;
var clientHeight = 0;
var scrollHeight = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
} else {
clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
}
// 知识点:Math.max 比较大小,取最大值返回
scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);

if (scrollTop + clientHeight >= scrollHeight) {
return true;
} else {
return false;
}
};

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

  1. jQuery判断滚动条滚到页面底部脚本

    原文地址 http://www.111cn.net/wy/jquery/61741.htm

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

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

  3. jQuery判断滚动条是上滚还是下滚,且是否到达底部或顶部

    jQuery判断滚动条是上滚还是下滚,且是否到达底部或顶部:http://www.haorooms.com/post/jquery_scroll_upanddown //滚动条滚动加载更多内容 //判 ...

  4. Jquery判断滚动条是否到达窗口顶部和底部

    <script type="text/javascript"> $(document).ready(function(){     alert($(window).he ...

  5. jquery如何判断滚动条滚到页面底部并执行事件

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

  6. Jquery 判断滚动条到达顶部或底部

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

    判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight.   scrollTop为滚动条在Y轴上的滚动距离.   clientHeigh ...

  8. jQuery——检测滚动条是否到达底部

    一.jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数:$(document).height()    获取整个页面的高度:$(window).height()    ...

  9. javascript&jquery 判断滚动到页面底部

      js 判断滚动到页面底部 CreateTime--2018年4月14日10:13:07 Author:Marydon 1.使用场景: 滚动到屏幕底部,触发加载分页数据请求(qq空间,手机端) 2. ...

随机推荐

  1. 关于 Unity 项目中的 Mono 堆内存泄露

    关于 Unity 项目中的 Mono 堆内存泄露 题记:这是补一篇应该在将近一年前就应该写的记录,今天终于补上. 内存泄露是一个老话题了,之前我专门写过一篇 排查 Lua 虚拟机内存泄露 的文章,并且 ...

  2. Java 接口和抽象类--缺省模式

    一个软件设计的好坏,我想很大程度上取决于它的整体架构,而这个整体架构其实就是你对整个宏观商业业务的抽象框架,当代表业务逻辑的高层抽象层结构 合理时,你底层的具体实现需要考虑的就仅仅是一些算法和一些具体 ...

  3. Circular dependencies cannot exist in RelativeLayout

    循环布局错误!!! <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:an ...

  4. Eigen学习笔记2:C++矩阵运算库Eigen介绍

    Eigen常规矩阵定义 1.使用 Eigen的使用在官网上有详细的介绍,这里对我学习过程中用到的基本操作进行介绍.首先是矩阵的定义.在矩阵类的模板参数共有6个.一般情况下我们只需要关注前三个参数即可. ...

  5. [YC703]ゴミ拾い Easy

    [YC703]ゴミ拾い Easy 题目大意: 二维平面内有\(n(n\le3\times10^5)\)个人和\(n\)个物品,第\(i\)个人在\((a_i,0)\)上,第\(i\)个物品在\((x_ ...

  6. servlet3.0 @WebServlet注解无效的情况

    web.xml文件中的metadata-comcomplete属性的作用: 该属性指定当前的部署描述文件是否是完全的.如果设置为true,则容器在部署时只依赖部署描述文件,忽略所有的注解(同时也会跳过 ...

  7. bzoj 2693

    收获: 1.积性函数的积也是积性函数,基本的积性函数:常数函数,正比例函数,欧拉函数,Mobius函数,积性函数一般都知道表达式,所以一般都可以在线性筛时搞定. 2.遇到整除求和时,这个东西就已经是最 ...

  8. kali 执行apt-get upgrade后,终端无法打开的解决办法

    今天在kali执行apt-get upgrade命令后,reboot启动,发现进入界面终端无法开启 一波百度,google发现大概应该是语言的配置问题,因为最开始安装kali的时候是选择中文,可能up ...

  9. linux基础命令学习(三)文件搜索 find

    1.使用name选项 查找自己的根目录$Home中的文件,可以用: find ~ -name "*.log" -print  查找当前目录下的文件,可以用: find . -nam ...

  10. Struts+Hibernate+Spring常见问题

    http://wanglihu.iteye.com/blog/1897718 1.java.lang.NoClassDefFoundError: org/objectweb/asm/ClassVisi ...