各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight
1、.position()和.offset()
jquery的.position()获取相对于最近的position为relative或absolute的父元素的偏移，返回.position().left和.position().top，不算上自己的margin-left；
jquery的.offset()获取相对于视口左上角的偏移，返回.offset().left和.offset().top, 算上自己的margin-left,，还可以设置.offset({left:,top:});这个很有用，比如编写日期控件时，append到body上，然后就可以根据input的.offset()和高度设置日期控件的.offset()，最终这些值自动会被换算为position为relative（相对于body）的top和left。
jquery的.offset()与js的obj.offsetLeft和.obj.offsetTop一样，只是这个不能赋值。
2、.outerHeight()、.innerHeight()和.height()
jquery的.outerHeight()=border+padding+height，等同于js的.offsetHeight（.offsetWidth同理）
.outerHeight(true)=margin+border+padding+height
.innerHeight()=padding+height
.height()设置和获取高度
3、.scrollTop和.scrollHeight
.scrollTop:已经滚动过的高度;
.scrollHeight:整个滚动的高度，从开始到滚动结束滚动过的高度，包括滚动元素自身的高度。
用图来解释：如下图，contentContainer为父元素，content为它的子元素，由于它的高度设置得比父元素高度高，所以父元素出现了滚动条。
假设现在滑动条已划过了一段距离，
则contentContainer的scrollTop为a，scrollHeight为b。
4、监听整个网页的滚动事件：
测试ie11、chorme、firefox，发现body上不支持监听整个网页的滚动事件scroll,window上都支持：window.onscroll=function(){};
5、获取/设置网页已滚动的高度：
| chrome |
document.documentElement.scrollTop无效为0， document.body.scrollTop有效与$('body').scrollTop()+','+$(document).scrollTop()等值 |
| safari与chrome表现相同 | |
| ie11（包括其模拟的IE10-7） |
document.documentElement.scrollTop有效与$(document).scrollTop()等值， document.body.scrollTop无效为0，$('body').scrollTop()无效为0 |
| firefox |
document.documentElement.scrollTop有效与$(document).scrollTop()等值， document.body.scrollTop无效为0，$('body').scrollTop()无效为0 |
所以获取网页已滚动的高度时：Math.max(document.documentElement.scrollTop,document.body.scrollTop)或$(document).scrollTop()
jquery和js的scrollTop都可以赋值。
所以如果要设置‘返回顶部’的效果应该：
$('#totop').click(function(){
document.body.scrollTop?document.body.scrollTop=0:document.documentElement.scrollTop=0;
//或$(document).scrollTop(0);
})
另外测试同一个页面，用鼠标滚轮把页面滚动到底，ie11和chrome都只触发了两次，大概是scrollTop从166到230,而firefox则触发了15次，看来ie11和chrome对触发滚动事件做了优化。可以手动添加判断两次滚动间隔超过多少px才允许运行onscroll函数:
var stop=Math.max(document.documentElement.scrollTop,document.body.scrollTop);
window.onscroll=function(){
if(Math.max(document.documentElement.scrollTop,document.body.scrollTop)-stop>100)
{//do something}
}
6、获取body视口高度：
有<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">时：
| chrome |
document.documentElement.clientHeight有效，window.innerHeigh有效， document.body.clientHeight无效与$('body').height()等值 |
| ie11（包括其模拟的IE10-9） |
document.documentElement.clientHeight有效，window.innerHeigh有效， document.body.clientHeight无效与$('body').height()等值, |
| 用ie11模拟ie8、ie7 | window.innerHeight为undefined，其他相同 |
| firefox |
document.documentElement.clientHeight有效，window.innerHeigh有效， document.body.clientHeight无效与$('body').height()等值 |
无<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">时：
chrome：document.documentElement.clientHeight无效与$('body').outerHeight(true)等值，window.innerHeigh有效，document.body.clientHeight有效，即使是有<!DOCTYPE>也是如此。
ie11:document.documentElement.clientHeight有效,document.body.clientHeight有效(ie7,8,9:无效与$('body').outerHeight(true)等值),window.innerHeigh有效,（用ie11模拟ie8、ie7时，window.innerHeight为undefined），即使是有<!DOCTYPE>也是如此。
所以在保证有完整<!DOCTYPE...声明的前提下，获取body的视口高度为：document.documentElement.clientHeight;
7、判断div的滚动条滚到底部
只要判断这个div已滚动的距离scrollTop+自己本身的高度offsetHeight>这个div的scrollHeight就表示滚动到底了。
如：一个id='contentContainer'的div里面包含一个高度查过自己 id='content'的子div。
则只要
document.getElementById('contentContainer').onscroll=function(){
if(this.scrollTop+this.offsetHeight>=this.scrollHeight){
$(this).append('bottom');
//不要用==因为很多浏览器并不是每滚动1px就触发scroll事件的
}
}
运行代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>example</title>
</head>
<body >
<div id='show'></div><div id='contentContainer' style="margin:10px 0 0 10px;overflow:auto; padding:30px;height:300px;width:80%;border:2px solid black;">
<div id='content' style="margin:10px 0 0 10px; padding:10px;height:700px;width:80px;border:1px solid black;"></div>
</div>
<script type="text/javascript">
document.getElementById('contentContainer').onscroll=function(){
if(this.scrollTop+this.offsetHeight>=this.scrollHeight)
document.getElementById('show').innerHTML=document.getElementById('show').innerHTML+'tobottom,';
}
</script>
</body>
</html>
8、判断body的滚动条滚到底部:
获取页面的scrollHeight：document.documentElement.scrollHeight在各浏览器中表现一致。
监听页面滚动条滚到底部：
window.onscroll=function(){
var scrolltop=Math.max(document.documentElement.scrollTop,document.body.scrollTop);
if(scrolltop+document.documentElement.clientHeight>=document.documentElement.scrollHeight)
alert( 'nowbottom' );
};
各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight的更多相关文章
- DIV滚动条滚动到指定位置（jquery的position()与offset()方法区别小记）
相对浏览器,将指定div滚到到指定位置,其用法如下 $("html,body").animate({scrollTop: $(obj).offset().top},speed); ...
- 优化UITableViewCell高度计算的那些事
优化UITableViewCell高度计算的那些事 我是前言 这篇文章是我和我们团队最近对 UITableViewCell 利用 AutoLayout 自动高度计算和 UITableView 滑动优化 ...
- 优化UITableViewCell高度计算的那些事（RunLoop）
这篇总结你可以读到: UITableView高度计算和估算的机制 不同iOS系统在高度计算上的差异 iOS8 self-sizing cell UITableView+FDTemplateLayout ...
- UITableViewCell 高度计算从混沌初始到天地交泰
[原创]UITableViewCell 高度计算从混沌初始到天地交泰 本文主要基予iOS UITableViewCell 高度自适应计算问题展开陈述,废话少说直入正题: UITableView控件可能 ...
- Dedecms当前位置{dede:field name='position'/}修改
这个实在list_article.htm模板出现的,而这个模板通过loadtemplage等等一系列操作是调用的include 下的arc.archives.class.php $this->F ...
- jQuery css,position,offset,scrollTop,scrollLeft用法
jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...
- 《转》优化UITableViewCell高度计算的那些事
我是前言 这篇文章是我和我们团队最近对 UITableViewCell 利用 AutoLayout 自动高度计算和 UITableView 滑动优化的一个总结.我们也在维护一个开源的扩展,UITabl ...
- Dedecms当前位置{dede:field name='position'/}修改，去掉>方法
Dedecms当前位置{dede:field name='position'/}修改,如何去掉> 一.修改{dede:field name='position'/}的文字间隔符,官方默认的是&g ...
- bug记录：IE8，包含块min-height/height共存时的高度计算bug
问题的条件有: A元素是B元素的包含块. A元素设置overflow:hidden;,并同时设置了height和min-height,同时height计算值 < min-height 原生IE8 ...
随机推荐
- PHP 中的超全局变量
(1)$_GET[].一个包含所有PHP 从客户端浏览器接收的GET变量的数组. (2)$_POST[].一个包含所有PHP 从客户端浏览器接收的POST变量的数组. (3)$_COOKIE[].一个 ...
- Javascript Array Distinct (array.reduce实现)
javascript 没有原生的Distinct功能 . (至少现在还没有)但我们可以通过简单的script 自己实现 . Distinct就是把数组中重复出现2次或以上的值给删除掉,确保数组内每个值 ...
- linux下so动态库一些不为人知的秘密
linux 下有动态库和静态库,动态库以.so为扩展名,静态库以.a为扩展名.二者都使用广泛.本文主要讲动态库方面知识. 基本上每一个linux 程序都至少会有一个动态库,查看某个程序使用了那些 ...
- POJ 3009 深度优先搜索
问题:打冰球.冰球可以往上下左右4个方向走,只有当冰球撞到墙时才会停下来,而墙会消失.当冰球紧贴墙时,不能将冰球往那个方向打.冰球出界就当输,超过10次还没将冰球打到目标位置也当输.求用最小次数将冰球 ...
- aptana 插件离线下载方式
aptana 插件离线下载方式 Aptana 网站改版后取消了eclipse 插件的zip直接下载地址,其实aptana 官网仍还提供aptana 插件的zip包下载不过比较隐蔽而已.很多人在线安装时 ...
- mysql导入数据大小设置方法
MySQL导入数据库文件最大限制2048KB和phpmyadmin导入数据最大限制2048KB的解决方法 解决办法: 1.打开php.ini.找到 upload_max_filesize . memo ...
- cnBlogs_代码着色
一个程序员当然希望写出来的代码不仅质量上好,而且看上去也很好.以前在网络上看见别人写的代码,着色以及背景都好极了,很是羡慕,但就是不知道如何设置 --------------------------- ...
- 【初学者常见问题】一脚踏入protected埋下的陷阱
受保护的(protected)——声明该成员的类的子类可以访问这个类的成员(但有一定的限制),并且,声明该成员的包内部的任何类也可以访问这个成员 protected修饰符参考:http://www.3 ...
- java 截取字符串 拆分字符串
例如 想要吧"90_python" 分成“90” 和“python” 从网上看到的方法: public class splitTest { public static void m ...
- Eclipse 4.2 + Tomcat 7.x + JDK 7 搭建Java Web开发环境
1. 准备工具 Eclipse 4.2 (到官网下载:http://www.eclipse.org/downloads/ 要下载Eclipse IDE for Java EE Developers ...