先搞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. [转载] Tmux 速成教程：技巧和调整

    原文: http://blog.jobbole.com/87584/ 决定从 screen 转向 tmux 了, 非常喜欢 tmux 的窗格功能. 简介 有些开发者经常要使用终端控制台工作,导致最终打 ...

  2. caffe的db_lmdb.hpp文件

    先总的说一下: 类:LMDBCursor:  它干了点什么?它需要传入参数为:mdb_txn(传入它是因为用完它,把它absort掉), mdb_cursor;它应该是用来读出数据的: 类:LMDBT ...

  3. libevent源码安装及Linux自动编译功能总结

    这个..那个..后来发现..直接用jumbo就可以安装libevent.不过,学习一些automake的知识还是有好处的. 03机器也安装了. 这几天在阅读libevent源码,发现参考资料是基于li ...

  4. Centos7 PHP7 编译安装 开机自启动

    1.PHP7.0.13下载 wget http://cn2.php.net/get/php-7.0.13.tar.gz/from/this/mirror 2.解压 .tar.gz 3. 进入目录 cd ...

  5. 【CDN】海外免费加速CDN：Incapsula,CloudFare

    最近服务器要搬迁到香港,因为后续有国外用户使用,基于此要使用大陆和海外都比较好的cdn才好 一开始国外同事推荐CloudFare,后来看看效果开始使用Incapsula CloudFare 官网:ht ...

  6. JS 的子父级页面调用

    window.frames["iframevehquery"].add(); // 父页面调用嵌套子页面的js函数, iframevehquery 为 iframe 的name值, ...

  7. 转！！URL和URI区别

    URI,URL,URN 从上面的那幅图可以看出来,一共有三个不同的概念URI,URL,URN.这讨论这样的问题时,最好的方法就是回到原点啊,这里我们在RFC 3986: Uniform Resourc ...

  8. 原！！tomcat7.0 配置数据库连接池 SQLServer2000

    SQLServer2000所需的3个驱动jar包 msbase.jarmssqlserver.jarmsutil.jar 放入WEB-INF lib文件夹中 1.META-INF 创建一个contex ...

  9. （转）springAOP解析-1

    原文:http://hzbook.group.iteye.com/group/wiki/2261-Spring 3.1  Spring AOP概述 3.1.1  AOP概念回顾AOP是Aspect-O ...

  10. shell如何在指定文件的指定位置后面添加内容

    最近工作中遇到一个问题,想在某个文件的指定位置后面添加一个标志位,要求在shell脚本里实现. 问题说明: 想在sys_config.fex文本的某个字符串后面添加一个flag 例如:sys_conf ...