//jquery 实现代码
$(document).height() == $(window).height() + $(window).scrollTop()

1 整个空间的高度 包含(滚动条距离顶部高度 + 可视区高度) $(document).height()
2 滚动条距离顶部高度 $(window).scrollTop()
3 可视区高度  $(window).height()

//原生js实现方式
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

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;
}
};来自://http://www.cnblogs.com/grimm/p/5069973.html

  

js 判断浏览器是否滚动到底部的更多相关文章

  1. JS判断浏览器类型,JS判断客户端操作系统

    JS判断浏览器类型 function judge(){ var browser = { versions: function() { var u = navigator.userAgent, app ...

  2. js判断浏览器类型 js判断ie6不执行

    js判断浏览器类型 $.browser  对象 $.browser.version 浏览器版本 var binfo = ''; if ($.browser.msie) { binfo = " ...

  3. Js 判断浏览器类型整理

    判断原理 JavaScript是前端开发的主要语言,我们可以通过 编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性 ...

  4. JS判断浏览器类型和详细区分IE各版本浏览器

    今天用到JS判断浏览器类型,于是就系统整理了一下,便于后期使用. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...

  5. js判断浏览器是否安装或启用了flash的方法总结

    目录 # js判断浏览器是否安装或启用了flash的方法 # chrome浏览器启用flash插件的方法 # 参考 # js判断浏览器是否安装或启用了flash的方法 在传统浏览器,可以使用windo ...

  6. JS判断浏览器类型的方法总结(IE firefox chrome opera safari)

    JS判断浏览器类型的方法总结,可判别当前客户端所使用的浏览器是ie,firefox,safari,chrome或者是opera,另外js可以精确判断到ie浏览器的版本,依然直接上代码,需要的朋友可按照 ...

  7. JQuery或JS判断浏览器内核版本号以及是否支持W3C盒子模型

    jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support .在更新的 2.0 版本中,将不再支持 IE 6/7/8. ...

  8. 纯JS阻止浏览器默认滚动事件,实现自定义滚动方法

    首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏 ...

  9. PHP JS判断浏览器,微信浏览器

      微信内置浏览器的 User Agent 如何判断微信内置浏览器,首先需要获取微信内置浏览器的User Agent,经过在 iPhone 上微信的浏览器的检测,它的 User Agent 是: Mo ...

随机推荐

  1. pandas 8 画图

    from __future__ import print_function import pandas as pd import numpy as np import matplotlib.pyplo ...

  2. jquery IE7 下报错:SCRIPT257: 由于出现错误 80020101 而导致此项操作无法完成

        非IE(内核)浏览器运行正常,在IE中运行异常,一般考虑为js中多了符号.     常见的有:         1.上面的html注释"<!-- -->",这种 ...

  3. System and method for assigning a message

    A processor of a plurality of processors includes a processor core and a message manager. The messag ...

  4. [Test] Easy automated testing in NodeJS with TestCafe

    Quickly get up and running with sensible automated testing scenarios written in ES6. Installing and ...

  5. 如何将visual studio 2010编辑模式改为插入???

    按一下键盘上的 insert button 反之亦然

  6. web集群中经常使用的session同步解决方式及对照

    随着站点的功能越来越多,用户量越来越庞大,单节点模式已经严重不能支撑整个系统的正常运作,轻则用户页面訪问时间越来越慢.重则就会导致整个系统瘫痪.这时候 就须要优化或调整眼下的架构,大部分人就会採用各种 ...

  7. angularjs 遍历

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  8. mDNS原理的简单理解——每个进入局域网的主机,如果开启了mDNS服务的话,都会向局域网内的所有主机组播一个消息,我是谁,和我的IP地址是多少。然后其他也有该服务的主机就会响应,也会告诉你,它是谁,它的IP地址是多少

    MDNS协议介绍 mDNS multicast DNS , 使用5353端口,组播地址 224.0.0.251.在一个没有常规DNS服务器的小型网络内,可以使用mDNS来实现类似DNS的编程接口.包格 ...

  9. jquery操作select的各种方法

    在工作中,有时候会遇到给select组件添加一些事件,前两天发表了一篇文章,<用jquery给select加选中事件>大致阐述了简单的jq操作select的方法,但是为了详细的介绍一下se ...

  10. Lists are mutable

    The syntax for accessing the elements of a list is the same as for accessing the characters of a str ...