jQuery的position（），offset（），scrollTop()/scrollLeft()
---恢复内容开始---
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
;
|
****行内元素会默认1px间隔