各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight

时间：2022-09-26 10:26:12

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为它的子元素，由于它的高度设置得比父元素高度高，所以父元素出现了滚动条。

假设现在滑动条已划过了一段距离，

各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight

则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的更多相关文章

  1. DIV滚动条滚动到指定位置（jquery的position&lpar;&rpar;与offset&lpar;&rpar;方法区别小记）

    相对浏览器,将指定div滚到到指定位置,其用法如下 $("html,body").animate({scrollTop: $(obj).offset().top},speed); ...

  2. 优化UITableViewCell高度计算的那些事

    优化UITableViewCell高度计算的那些事 我是前言 这篇文章是我和我们团队最近对 UITableViewCell 利用 AutoLayout 自动高度计算和 UITableView 滑动优化 ...

  3. 优化UITableViewCell高度计算的那些事（RunLoop）

    这篇总结你可以读到: UITableView高度计算和估算的机制 不同iOS系统在高度计算上的差异 iOS8 self-sizing cell UITableView+FDTemplateLayout ...

  4. UITableViewCell 高度计算从混沌初始到天地交泰

    [原创]UITableViewCell 高度计算从混沌初始到天地交泰 本文主要基予iOS UITableViewCell 高度自适应计算问题展开陈述,废话少说直入正题: UITableView控件可能 ...

  5. Dedecms当前位置&lbrace;dede&colon;field name&equals;&&num;39&semi;position&&num;39&semi;&sol;&rcub;修改

    这个实在list_article.htm模板出现的,而这个模板通过loadtemplage等等一系列操作是调用的include 下的arc.archives.class.php $this->F ...

  6. jQuery css&comma;position&comma;offset&comma;scrollTop&comma;scrollLeft用法

    jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...

  7. 《转》优化UITableViewCell高度计算的那些事

    我是前言 这篇文章是我和我们团队最近对 UITableViewCell 利用 AutoLayout 自动高度计算和 UITableView 滑动优化的一个总结.我们也在维护一个开源的扩展,UITabl ...

  8. Dedecms当前位置&lbrace;dede&colon;field name&equals;&&num;39&semi;position&&num;39&semi;&sol;&rcub;修改，去掉&gt&semi;方法

    Dedecms当前位置{dede:field name='position'/}修改,如何去掉> 一.修改{dede:field name='position'/}的文字间隔符,官方默认的是&g ...

  9. bug记录：IE8，包含块min-height&sol;height共存时的高度计算bug

    问题的条件有: A元素是B元素的包含块. A元素设置overflow:hidden;,并同时设置了height和min-height,同时height计算值 < min-height 原生IE8 ...

随机推荐

  1. js的replace函数入参为function时的疑问

    近期在写js导出excel文件时运用到replace方法,此处详细的记录下它各个参数所代表的的意义. 定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式 ...

  2. LayoutInflater&lpar;二&rpar;

    每一个视图的绘制过程都必须经历三个最主要的阶段,即onMeasure().onLayout()和onDraw(),下面我们逐个对这三个阶段展开进行探讨. 一. onMeasure() measure是 ...

  3. Java环境配置出现的问题及解决办法

    我使用的安装文件,从博客园一个童鞋那里找到的,连接是http://www.cnblogs.com/SelectError/p/3205582.html#commentform 开发基础环境,版本为Ja ...

  4. Dev控件 galleryControl

    发现一个规律,不会的控件先拖到界面上,右上角需要add 的就对应add一个.然后就是找属性和集合手动添加几个. 然后把XXXForm.Designer.cs 里面的代码提取到逻辑代码中,就把常量换成变 ...

  5. 【Unity Shader】五、Shader纹理映射，及纹理的缩放和偏移

    将漫反射的颜色改为从纹理贴图中获取,逐像素计算. Shader "Custom/11-Texture" { // 纹理贴图,BlinnPhong光照模型 Properties{ / ...

  6. Oracal 11 g 数据库安装

    一:下载安装包 http://www.oracle.com/technetwork/cn/database/enterprise-edition/downloads/112010-win64soft- ...

  7. 逻辑斯蒂回归（Logistic Regression）

    逻辑回归名字比较古怪,看上去是回归,却是一个简单的二分类模型. 逻辑回归的模型是如下形式: 其中x是features,θ是feature的权重,σ是sigmoid函数.将θ0视为θ0*x0(x0取值为 ...

  8. element-ui 点击行如何获取table的行索引

    文档中有一个tableRowClassName方法,可以获取到当前行的index, tableRowClassName ({row, rowIndex}) { //把每一行的索引放进row row.i ...

  9. UTF-8编码下&&num;39&semi;&bsol;u7528&bsol;u6237&&num;39&semi;转换为中文汉字&&num;39&semi;用户&&num;39&semi;

    UTF-8编码下'\u7528\u6237'转换为中文'用户' 一.前言 有过多次,在开发项目中遇见设置文件编码格式为UTF-8,但是打开该文件出现类似\u7528这样的数据,看也看不懂,也不是平常见 ...

  10. ueditor百度编辑器的赋值方法

    示例: http://ueditor.baidu.com/website/onlinedemo.html 引用代码: window.UMEDITOR_HOME_URL = $CONFIG['domai ...

相关文章