jQuery的position（），offset（），scrollTop()/scrollLeft()

浏览数：24 / 时间：2015年06月09日

---恢复内容开始---

jquery定位函数：offset，position，scrollTop/scrollLeft

（1）offset：获取当前元素相对于文档的偏移。只对可见元素有效。

(2) position:获取元素相对于最近的一个position为relative or absolute的元素的祖父节点的相对偏移。

（3）scrollTop()/scrollLeft()是分别获取元素滚动条距顶端的距离。

$(selector).offset()与$(selector).position()都返回包含top、left属性的对象 top/left的值为number

scrollTop() /scrollLeft()的返回值也为number类型 scroll()返回该对象本身

参考例子

测试代码：

  
    <body height="1500px">
<div style="position:relative;margin-top:1000px;height:300px;border:1px solid #0C6;">
<p style="margin:50px;">compute my height</p>
</div>
</body>

在firebug中得到的结果为：

  
    $(‘div‘).offset() 
top:1000;left:8;  //浏览器默认body 与视窗margin 为8px
$(‘p‘).offset()
top:1051;left:9;  
$(‘div‘).scrollTop()=0;$(‘div‘).scrollLeft()=0;

$(‘p‘).position();<br>top:0 ;left:0;

这个结果感觉很奇怪，第一二个结果还是意料之中，但是第三个是将滚动条拉到最下方的时算出的结果。

奇怪的事情出现了。

  
    <body style="height:1500px;">
<div style="position:relative;margin-top:1000px;height:300px;">
<p style="padding:50px;">compute my height</p>
</div>
</body>

  
    $(‘div‘).offset() 
top:1000;left:8;
$(‘p‘).offset()
top:1000;left:8;
$(‘div‘).scrollTop()=0;$(‘div‘).scrollLeft()=0;

$(‘p‘).position();<br>top:0 ;left:0;

padding不起作用了！！！盒子模型左至右 margin-left |border-left padding-left width padding-right|border-right margin-right

而offset()position() 读取的值是margin-left(margin-top)+border-left(border-top) padding不在其内

继续做修改：

  
    <body style="height:1500px;">
<div style="position:relative;margin-top:1000px;height:300px;border:1px solid #666;">
<p style="padding:50px;">compute my height</p>
</div>
</body>

$(‘div‘).offset()<br>top:1000;left:8;<br>
 $(‘p‘).offset()<br> top:1017;left:9; <br> //div>p会产生8px的margin
$(‘div‘).scrollTop()=0;<br>$(‘div‘).scrollLeft()=0;<br>
$(‘p‘).position();<br>top:0 ;left:0;