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 ...
随机推荐
- 表达式中含or的赋值
or用在赋值表达式的时候,不是返回bool值,而是按以下的情况赋值 如果左侧的表达式估值为True,则返回左侧表达式 否则返回右侧表达式 例子: insignificance = 3 or 1 pri ...
- redhat下搭建jdk+tomcat环境
由于redhat自带安装了jdk,我们需要现将其进行卸载 卸载系统自带的jdk版本: 查看自带的jdk: 输入命令:rpm -qa|grep gcj 可能看到如下类似的信息: libgcj-4.1.2 ...
- RubyMine2017破解
RubyMine2017破解 学习了:https://www.7down.com/soft/172903.html 激活的时候选择 license server; 输入如下地址激活: http://i ...
- Android图片旋转,缩放,位移,倾斜,对称完整演示样例(一)——imageView.setImageMatrix(matrix)和Matrix
MainActivity例如以下: import android.os.Bundle; import android.view.MotionEvent; import android.view.Vie ...
- 树莓派学习路程No.2 GPIO功能初识 wiringPi安装
WiringPi是应用于树莓派平台的GPIO控制库函数,WiringPi遵守GUN Lv3.wiringPi使用C或者C++开发并且可以被其他语言包转,例如python.ruby或者PHP等.Wiri ...
- 通过DNS通道传输的交互式PowerShell脚本
摘自:http://www.freebuf.com/sectool/90616.html 欢迎来到一周PowerShell脚本的第五天,今天我们将讨论使用ICMP和DNS的交互式PowerShell脚 ...
- 项目中log4j的使用
基于ssm项目: 1.导入log4j.slf4j相关jar包 commons-logging-1.1.3.jar.log4j-1.2.12.jar.slf4j-api-1.6.6.jar.slf4j- ...
- php--防止DDos攻击代码
<?php //查询禁止IP $ip =$_SERVER['REMOTE_ADDR']; $fileht=".htaccess2"; if(!file_exists($fil ...
- RMAN备份脚本--DataGuard primary
单机环境全备 export ORACLE_BASE=/oracle export ORACLE_HOME=$ORACLE_BASE/product/10.2.0/db_1 export ORACL ...
- Linux和Windows系统的远程桌面访问知识(转载)
为新手讲解Linux和Windows系统的远程桌面访问知识 很多新手都是使用Linux和Windows双系统的,它们之间的远程桌面访问是如何连接的,我们就为新手讲解Linux和Windows系统的 ...