先搞offsetTop，最难懂的就是它了

　　官方解释：返回当前元素的上边界到它的包含元素的上边界的偏移量，以像素为单位。这真TM坑爹啊！有木有！经过仔细研究查找得出结论：offsetTop是相对于离它最近的具有绝对或相对定位的父级元素的距离，有点绕口是不是？别急，咱慢慢剥开它...首先一定要明白offsetTop是一个相对值，那它到底是相对于谁的值呢，现在的女明星不都流行找干爹嘛，offsetTop也给自己找了一个，别人的要求是要有钱有权，而它的要求是要有position（只能是relative和absolute，fixed在IE和Opera中无效），并且是父级中离它最近的那一个，挺符合就近原则滴!而offsetY则是一个鼠标事件的值，它是相对于你所点击的那个元素的，它的最小值是0，最大值是所点击元素的高度。在现在大家明白了吧，如果还木有就看这个实例：http://www.quirksmode.org/dom/tests/offset.html

scrollHeight, scrollWidth

返回元素的完整的高度和宽度，以像素为单位。当一个元素拥有滚动条时（比如由于 CSS 的 overflow 属性），这些属性和 offsetHeight 与 offsetWidth 不同，offsetHeight 和 offsetWidth 只是报告元素的可见部分的大小。这是非标准的但却得到很好支持的属性。

　　当你把滚动条滚到底部的时候，scrollHeight = scrollTop + clientHeight；当没有滚动条时scrollHeight = clientHeight，IE则是等于内容的高度；

scrollTop, scrollLeft

　　设置或返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候，例如，元素的 CSS overflow 属性设置为 auto 的时候，这些像素才有用。这些属性也只在文档的 <body> 或 <html> 标记上定义（这和浏览器有关），并且一起来制定滚动文档的位置。注意，这些属性并不会指定一个 <iframe> 标记的滚动量。这是非标准的但却得到很好支持的属性

搞懂offsetY、offsetTop、scrollTop、offsetHeight、scrollHeight的更多相关文章

  1. 理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight

    一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和o ...

  2. JS-scrollTop、scrollHeight、clientTop、clientHeight、offsetTop、offsetHeight的理解

    scrollTop, 可写(这些属性中唯一一个可写的元素) Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数. 一个元素的 scrollTop 值是这个元素的顶部到 ...

  3. clientHeight & offsetHeight & scrollHeight

    clientHeight & offsetHeight & scrollHeight scrollWidth/scrollHeight,offsetWidth/offsetHeight ...

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

    1..position()和.offset() jquery的.position()获取相对于最近的position为relative或absolute的父元素的偏移,返回.position().le ...

  5. 彻底搞懂Javascript的“==”

    本文转载自:@manxisuo的<通过一张简单的图,让你彻底地.永久地搞懂JS的==运算>. 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容让人犯错,从而 ...

  6. 完全搞懂傅里叶变换和小波（2）——三个中值定理<转载>

    书接上文,本文章是该系列的第二篇,按照总纲中给出的框架,本节介绍三个中值定理,包括它们的证明及几何意义.这三个中值定理是高等数学中非常基础的部分,如果读者对于高数的内容已经非常了解,大可跳过此部分.当 ...

  7. 完全搞懂傅里叶变换和小波（1）——总纲<转载>

    无论是学习信号处理,还是做图像.音视频处理方面的研究,你永远避不开的一个内容,就是傅里叶变换和小波.但是这两个东西其实并不容易弄懂,或者说其实是非常抽象和晦涩的! 完全搞懂傅里叶变换和小波,你至少需要 ...

  8. 不想再被鄙视？那就看进来！ 一文搞懂Python2字符编码

    程序员都自视清高,觉得自己是创造者,经常鄙视不太懂技术的产品或者QA.可悲的是,程序员之间也相互鄙视,程序员的鄙视链流传甚广,作为一个Python程序员,自然最关心的是下面这幅图啦 我们项目组一值使用 ...

  9. 来一轮带注释的demo，彻底搞懂javascript中的replace函数

    javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用.最近和前端走的比较近,借此 ...

随机推荐

  1. dateTimePicker的使用，时间控件

    <li> <label>促销时间<span class="imprt">*</span></label> <inp ...

  2. 如何让Service自动重启而不被kill掉

    重写service的onStartCommand方法. @Override    public int onStartCommand(Intent intent, int flags, int sta ...

  3. Hibernate Projections（投影、统计、不重复结果）

    Hibernate除了处理查询结果集中的对象之外,还可以将结果集中的结果当做行和列集来使用,这与通过JDBC执行select查询获得的数据的使用方式相似.因此,Hibernate也支持属性.统计函数和 ...

  4. Gitweb 安装与配置

    gitweb 可以通过搭建git服务器将代码保存在git服务器上,多个开发者可以从服务器上clone代码,也可以各自维护一份本地代码,在本地更新之后可以提交到git服务器上,提高开发效率.     g ...

  5. neon汇编，C嵌入汇编

    1. Neon-intrics.pdf中的 void vst2q_u16(__transfersize(16) uint16_t * ptr, uint16x8x2_t val);// VST2.16 ...

  6. PHP 安全相关 简单知识

    概要: 1.php一些安全配置 (1)关闭php提示错误功能 (2)关闭一些“坏功能” (3)严格配置文件权限. 2.严格的数据验证,你的用户不全是“好”人 2.1为了确保程序的安全性,健壮性,数据验 ...

  7. 如何部署Scrapy 到Scrapyd上？

    安装上传工具 1.上传工具 scrapyd-client 2.安装方法: pip install scrapyd-client 3.上传方法: python d:\Python27\Scripts\s ...

  8. ListView 搭配SimpleAdapter

    这是SimplerAdapter的构造函数 public SimpleAdapter(Context context, List<? extends Map<String, ?>&g ...

  9. 推荐两篇Unity与Android交互的文章

    http://www.xuanyusong.com/archives/676 里面18,19介绍

  10. 解决点击a标签返回页面顶部的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...