先搞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. iOS 推送消息长度

    iOS最大推送消息长度 官方要求是256个字节 实际测试为1005个字节 在iPhone6上测试 锁屏时收到消息时只显示76个汉字,剩下的被隐藏 程序进入后台时只显示47个汉字,剩下的被隐藏

  2. [转载] 跟着实例学习zookeeper 的用法

    原文: http://ifeve.com/zookeeper-curato-framework/ zookeeper 的原生客户端库过于底层, 用户为了使用 zookeeper需要编写大量的代码, 为 ...

  3. matplotlib库的常用知识

    看看matplotlib是什么? matplotlib是python上的一个2D绘图库,它可以在夸平台上边出很多高质量的图像.综旨就是让简单的事变得更简单,让复杂的事变得可能.我们可以用matplot ...

  4. junit4 javaee 5.0 jpa SSH 单元测试问题集锦

    本篇文章基于已经实现了ssh集成的demo.项目.具体的ssh项目怎么配置,请参考本文最后 spring环境下的JUnit4测试 1,下载所需jar包: spring-test-3.2.0.RELEA ...

  5. oracle 生成随机数【待整理】

    http://www.cnblogs.com/ulex/p/4415478.html http://blog.sina.com.cn/s/blog_6a01140c0100wimi.html

  6. hdu_3555 bomb

    数位动态规划     数位动态规划是求解一个大区间[L, R]中间满足条件Q的所有数字的个数(或者和,或其他)的一种方法.它通过分析每一位上的数字,一般用 dp[len][digit][...] 来表 ...

  7. x265

    1.编译库 https://bitbucket.org/multicoreware/x265/src/tip/build/README.txt?at=default 2.无法定位程序输入点x265_e ...

  8. HM中字典编码分析

    LZ77算法基本过程 http://jpkc.zust.edu.cn/2007/dmt/course/MMT03_05_2.htm LZ77压缩算法详解 http://wenku.baidu.com/ ...

  9. jquery 学习

    地址:http://www.w3school.com.cn/jquery/jquery_dom_add.asp

  10. 字符串(string)转json

    第一种方式: 使用js函数eval(); testJson=eval(testJson);是错误的转换方式. 正确的转换方式需要加(): testJson = eval("(" + ...