js 判断浏览器是否滚动到底部
//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 判断浏览器是否滚动到底部的更多相关文章
- JS判断浏览器类型,JS判断客户端操作系统
JS判断浏览器类型 function judge(){ var browser = { versions: function() { var u = navigator.userAgent, app ...
- js判断浏览器类型 js判断ie6不执行
js判断浏览器类型 $.browser 对象 $.browser.version 浏览器版本 var binfo = ''; if ($.browser.msie) { binfo = " ...
- Js 判断浏览器类型整理
判断原理 JavaScript是前端开发的主要语言,我们可以通过 编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性 ...
- 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 ...
- js判断浏览器是否安装或启用了flash的方法总结
目录 # js判断浏览器是否安装或启用了flash的方法 # chrome浏览器启用flash插件的方法 # 参考 # js判断浏览器是否安装或启用了flash的方法 在传统浏览器,可以使用windo ...
- JS判断浏览器类型的方法总结(IE firefox chrome opera safari)
JS判断浏览器类型的方法总结,可判别当前客户端所使用的浏览器是ie,firefox,safari,chrome或者是opera,另外js可以精确判断到ie浏览器的版本,依然直接上代码,需要的朋友可按照 ...
- JQuery或JS判断浏览器内核版本号以及是否支持W3C盒子模型
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support .在更新的 2.0 版本中,将不再支持 IE 6/7/8. ...
- 纯JS阻止浏览器默认滚动事件,实现自定义滚动方法
首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏 ...
- PHP JS判断浏览器,微信浏览器
微信内置浏览器的 User Agent 如何判断微信内置浏览器,首先需要获取微信内置浏览器的User Agent,经过在 iPhone 上微信的浏览器的检测,它的 User Agent 是: Mo ...
随机推荐
- pandas 8 画图
from __future__ import print_function import pandas as pd import numpy as np import matplotlib.pyplo ...
- jquery IE7 下报错:SCRIPT257: 由于出现错误 80020101 而导致此项操作无法完成
非IE(内核)浏览器运行正常,在IE中运行异常,一般考虑为js中多了符号. 常见的有: 1.上面的html注释"<!-- -->",这种 ...
- System and method for assigning a message
A processor of a plurality of processors includes a processor core and a message manager. The messag ...
- [Test] Easy automated testing in NodeJS with TestCafe
Quickly get up and running with sensible automated testing scenarios written in ES6. Installing and ...
- 如何将visual studio 2010编辑模式改为插入???
按一下键盘上的 insert button 反之亦然
- web集群中经常使用的session同步解决方式及对照
随着站点的功能越来越多,用户量越来越庞大,单节点模式已经严重不能支撑整个系统的正常运作,轻则用户页面訪问时间越来越慢.重则就会导致整个系统瘫痪.这时候 就须要优化或调整眼下的架构,大部分人就会採用各种 ...
- angularjs 遍历
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
- mDNS原理的简单理解——每个进入局域网的主机,如果开启了mDNS服务的话,都会向局域网内的所有主机组播一个消息,我是谁,和我的IP地址是多少。然后其他也有该服务的主机就会响应,也会告诉你,它是谁,它的IP地址是多少
MDNS协议介绍 mDNS multicast DNS , 使用5353端口,组播地址 224.0.0.251.在一个没有常规DNS服务器的小型网络内,可以使用mDNS来实现类似DNS的编程接口.包格 ...
- jquery操作select的各种方法
在工作中,有时候会遇到给select组件添加一些事件,前两天发表了一篇文章,<用jquery给select加选中事件>大致阐述了简单的jq操作select的方法,但是为了详细的介绍一下se ...
- Lists are mutable
The syntax for accessing the elements of a list is the same as for accessing the characters of a str ...