offsetTop,offsetHeight,scrollHeight,scrollTop的区别

offsetTop,offsetHeight,scrollHeight,scrollTop，这些属性曾经困扰了我很长很长很长时间。
今天花点功夫，彻底把他们搞清楚了。

假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。

offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：
一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
二、offsetTop 只读，而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

scrollTop 是“卷”起来的高度值，示例：
<div style="width:100px;height:100px;overflow:hidden;" id="p">
　　<div style="width:50px;height:300px;" id="t">如果为 p 设置了 scrollTop，这些内容可能不会完全显示。</div>
</div>
<script type="text/javascript">
　　var p = document.getElementById("p");
　　p.scrollTop = 10;
</script>
由于为外层元素 p 设置了 scrollTop，所以内层元素会向上卷。

scrollHeight 与 offsetHeight

offsetHeight是自身元素的高度，scrollHeight是自身元素的高度+隐藏元素的高度(是不是可以理解成内层元素的offsetHeight值？？？)。

　　<p style=" height:250px; "></p>

</div>
<script>
　　alert(document.getElementById("container").offsetHeight);
　　alert(document.getElementById("container").scrollHeight);
</script>
将依次输出100，250。因为已经指定了元素的height为100px，所以offsetHeight始终为100px；内部元素为 250px，而容器元素只有100px，那么还有150px的内容它无法显示出来，但它却是实际存在的，所以scrollHeight值100+150=250。

转载于:https://www.cnblogs.com/wuwenjie/p/5580442.html

offsetTop,offsetHeight,scrollHeight,scrollTop的区别相关推荐

关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究
我是以chrome浏览器做的研究. 先看一段代码: <script>window.addEventListener('DOMContentLoaded',function(){var no ...
clientHeight.offsetHeight.scrollHeight等的区别
查看了博文http://www.cnblogs.com/fullhouse/archive/2012/01/16/2324131.html 然后自己写一下加深印象. clientHeight:可见高度 ...
clientHeight offsetHeight scrollHeight offsetTop scrollTop
文章目录各属性详解实现 offsetParent.offsetLeft/offsetTop深度剖析 element.offsetParent 定义祖先元素中不存在定位元素 webkit内核.Fi ...
offsetTop和scrollTop的区别
最近想写个组件,结果被这两个属性搞的有点晕,查了下文档和资料,对这两个属性总结如下: 一直以来对offsetLeft,offsetTop,scrollLeft,scrollTop这几个方法很迷糊,花了 ...
scrollHeight、clientHeight、offsetHeight、 scrollTop
由于需要实现下拉分页加载,所以对scrollHeight.clientHeight.offsetHeight. scrollTop做些简单总结. 一.scrollHeight.clientHeight ...
一篇弄懂 scrollWidth、scrollHeight、scrollLeft和scrollTop的区别！（2）
快速理解scroll之间的区别简介完整代码 1.初始页面: 2.第一次纵向滚动: 3.第一次横向滚动条 4.总结简介 1.scrollHeight/scrollWidth 属性是一个只读属性 ...
scrollHeight、clientHeight、offsetHeight、scrollTop等的定义以及图解
开发中经常遇到使用scrollHeight.scrollTop.clientHeight.offsetHeight等的情况,网上有众多关于这些属性的解释,但是并不全面和直观,现在将这些属性结合图例整理 ...
花点时间记住scrollTop、clientHeight、offsetTop、scrollHeight
一.经典图解读先放上一张经典图看不懂,没关系!接下来耐心看完必然有不一样的收获. 我们常遇到的是实际是这么几个属性: offsetTop clientHeight scrollTop scroll ...
js滑动操作之-pageYOffset,scrollTop,offsetHeight,scrollHeight
读值 1) window.pageYOffset==window.scrollY it returns the number of pixels the document is currently s ...

offsetTop,offsetHeight,scrollHeight,scrollTop的区别

offsetTop,offsetHeight,scrollHeight,scrollTop的区别相关推荐

最新文章

热门文章