各种height 以及判断滚动条是否已拉到页面最底部
DTD已声明
IE
document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 浏览器滚动部分高度,document.body.scrollTop 始终为0
document.documentElement.clientHeight 浏览器可视部分高度,document.body.clientHeight 浏览器所有内容高度
FF
document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 浏览器滚动部分高度,document.body.scrollTop 始终为0
document.documentElement.clientHeight 浏览器可视部分高度,document.body.clientHeight 浏览器所有内容高度
Chrome
document.documentElement.scrollHeight 浏览器所有内容高度, document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 始终为0,document.body.scrollTop 浏览器滚动部分高度
document.documentElement.clientHeight 浏览器可视部分高度,document.body.clientHeight 浏览器所有内容高度
DTD未声明
IE
document.documentElement.scrollHeight 浏览器可视部分高度,document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 始终为0,document.body.scrollTop 浏览器滚动部分高度
document.documentElement.clientHeight 始终为0,document.body.clientHeight 浏览器可视部分高度
FF
document.documentElement.scrollHeight 浏览器可视部分高度, document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 始终为0,document.body.scrollTop 浏览器滚动部分高度
document.documentElement.clientHeight 浏览器所有内容高度,document.body.clientHeight 浏览器可视部分高度
Chrome
document.documentElement.scrollHeight 浏览器可视部分高度,document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 始终为0,document.body.scrollTop 浏览器滚动部分高度
document.documentElement.clientHeight 浏览器所有内容高度,document.body.clientHeight 浏览器可视部分高度
浏览器所有内容高度即浏览器整个框架的高度,包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和
浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。
综上
1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0,所以可以用这两个的和来求scrollTop
2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement,未声明的情况下用body
document.compatMode 可以用来判断是否声明了DTD, 值为"BackCompat":未声明,值为"CSS1Compat":已声明。
所以,判断滚动条是否已拉到页面最底部,可以用如下代码
window.onscroll = function (){
var marginBot = 0;
if (document.compatMode === "CSS1Compat"){
marginBot = document.documentElement.scrollHeight - (document.documentElement.scrollTop+document.body.scrollTop)- document.documentElement.clientHeight;
} else {
marginBot = document.body.scrollHeight - document.body.scrollTop- document.body.clientHeight;
}
if(marginBot<=0) {
//do something
}
}
文章取至:http://www.cnblogs.com/blackwood/archive/2013/03/12/2955472.html
各种height 以及判断滚动条是否已拉到页面最底部的更多相关文章
- IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部
E/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到 ...
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部
DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 docu ...
- js判断滚动条是否已到页面最底部或顶部实例
原文 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐 ...
- jquery如何判断滚动条滚到页面底部并执行事件
首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那 ...
- JS实现判断滚动条滚到页面底部并执行事件的方法
需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那 ...
- js判断滚动条到底部
判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容 ...
- 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】
前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...
- Jquery判断滚动条是否到达窗口顶部和底部
<script type="text/javascript"> $(document).ready(function(){ alert($(window).he ...
- 判断滚动条到底部的JS代码
这篇文章介绍了判断滚动条到底部的JS代码,有需要的朋友可以参考一下 判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrol ...
随机推荐
- MySQL 详细学习笔记
Windows服务 -- 启动MySQL net start mysql -- 创建Windows服务 sc create mysql binPath= mysqld_bin_path(注意:等号与值 ...
- lambda正则化参数的大小影响
当lambda的值很小时,其惩罚项值不大,还是会出现过拟合现象,当时lambda的值逐渐调大的时候,过拟合现象的程度越来越低,但是当labmda的值超过一个阈值时,就会出现欠拟合现象,因为其惩罚项太大 ...
- extern和include的作用
首先要搞清楚的是.h头文件中都是一些声明性的语句,是不分配内存的,所以头文件中有对函数的声明,有define语句,有没有实例化的结构体定义,但是没有对变量的定义(比如 int a),有的只是对外变量的 ...
- 整合Spring框架和MyBatis框架
------------------------siwuxie095 整合 Spring 框架和 MyBatis 框架 ...
- springboot自带定时任务和集成quartz
1,springboot自带的定时任务 默认是单线程 有这个依赖就可以 <dependency> <groupId>org.springframework.boot</ ...
- mysql数据库指定ip远程访问 指定用户 指定数据库
.登录 mysql -u root -p 之后输入密码进行登陆 .权限设置及说明 .1添加远程ip访问权限 GRANT ALL PRIVILEGES ON *.* TO 'root'@'192.168 ...
- [树状数组+逆序对][NOIP2013]火柴排队
火柴排队 题目描述 涵涵有两盒火柴,每盒装有n根火柴,每根火柴都有一个高度.现在将每盒中的火柴各自排成一列,同一列火柴的高度互不相同,两列火柴之间的距离定义为:∑ (ai-bi)2,i=1,2,3,. ...
- playframework链接MySQL数据库的问题
Scala 在米国已经发展的如火如荼,有些人甚至说Scala将成为未来语言的头号交椅.简洁的代码和表达式的写法让很多人倍感舒适,函数式和面向对象的编程范式也让其能在多种场合游刃有余的被使用.加之它是跑 ...
- SPARK安装三:SPARK集群部署
使用2.3.0版本,因为公司生产环境是这个版本 一.下载安装 cd /opt wget https://archive.apache.org/dist/spark/spark-2.3.0/spark- ...
- Html5与Css3知识点拾遗(六)
web字号 px() 百分比(较常用) em(最常用):一般1em=16px,相对单位.以父元素作参照系,父元素大小是不确定的 body{ font-size:100%; /*父元素默认为16px*/ ...