先搞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. JS 命名冲突

    1. JS中全局变量和局部变量重名会导致在指定域内无法取到变量: 2. 取出的结果为undefined;

  2. iOS 推送消息长度

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

  3. (转)接口自动化测试 – Java+TestNG 测试 Restful Web Service

    本文主要介绍如何用Java针对Restful web service 做接口自动化测试(数据驱动),相比UI自动化,接口自动化稳定性可靠性高,实施难易程度低,做自动化性价比高.所用到的工具或类库有 T ...

  4. (七)C语言中的void 和void 指针类型

    许多初学者对C中的void 和void 的指针类型不是很了解.因此常常在使用上出现一些错误,本文将告诉大家关于void 和void 指针类型的使用方法及技巧. 1.首先,我们来说说void 的含义: ...

  5. Linux命令：traceroute（windows中为tracert）

    通过traceroute 我们可以知道信息从你的计算机到互联网另一端的主机是走的什么路径.当然每次数据包由某一同样的出发点(source)到达某一同样的目的地(destination)走的路径可能会不 ...

  6. 将一堆石子分成多堆——Multi-SG 游戏

    这类博弈只需要记住一点,一个由多个游戏组成的游戏sg值为这多个游戏的sg值异或和. 也就是所有对一整个nim游戏它的sg值即为每一小堆的sg的异或和. hdu 5795 这题就是可以选择把一堆石子分成 ...

  7. J2EE 第二阶段项目之分析业务

    这次的项目为: 两金申报系统.主要是关系的练习,CRUD,统计. 这个项目没有pdf图,只有一本使用手册.(在我们出去工作后,做项目的时候,也可能只有项目需求的资料). 分析:每一张表都有分页,查看 ...

  8. C#_接口

    .Net提供了接口,这个不同于Class或者Struct的类型定义.接口有些情况,看似和抽象类一样,因此有些人认为在.Net可以完全用接口来替换抽象类.其实不然,接口和抽象类各有长处和缺陷,因此往往在 ...

  9. linux笔记：权限管理命令chmod,chown,chgrp,umask

    权限对文件和目录的含义是不同的:对文件来说:读:可以查看文件内容写:可以修改文件内容执行:可以执行文件对目录来说:读:可以列出目录中的内容写:可以在目录中创建.删除文件执行:可以进入目录 能够更改文件 ...

  10. sublime2配置python环境

    只需要在以下文件写入python编译器的路径: 在工具栏点击Preferences,打开Browse Packages.在打开的文件夹中找到Python,并打开这个文件夹.找到文件Python.sub ...