作者kilva (嗡嗡)
看板Ajax
标题[讨论] $.fn.offset()有些问题
时间Fri Sep 21 23:08:12 2012
看原始码，jQuery.fn.offset函式内的部份程式为：
box = elem.getBoundingClientRect();
clientTop = docElem.clientTop || body.clientTop || 0;
scrollTop = win.pageYOffset || docElem.scrollTop;
top = box.top + scrollTop - clientTop;
因为卷轴在视窗左边或顶端时要减去，所以减去clientTop，这个没问题。
但当docElem.clientTop为0，body.clientTop不为0时，问题就出现了。
因为docElem.clientTop为0，判断为伪，所以clientTop = body.clientTop。
这时设个 $(body).css("border","solid black 100px") ，如此得出的top和
left都会减去100px。
这样感觉怪怪的呢！
----
再稍微整理一下。在浏览器上测试之後，大概知道了一些东西。
先建一个网页，原始码为
<!DOCTYPE html>
<html style="border:2px solid black;margin:1px;padding:4px">
<head>
<meta charset="utf-8" />
<script src="jquery-1.8.0.js"></script>
<script>
$(function() {
var a="";
for(var i=0;i<100;i+=1) a+="aa<br>";
$("div").html(a);
var div = $("div")[0],
doc = div.ownerDocument.documentElement,
body = div.ownerDocument.body;
window.div = div;
window.doc = doc;
window.body = body;
})
</script>
</head>
<body style="border:16px solid red;margin:8px;padding:32px">
<div style="border:128px solid blue;margin:64px;padding:256px">
</div>
<body>
</html>
这里的div是<div>元素，body是<body>元素，doc则是<html>元素。
这样就可以测试了。
div.getBoundingClientRect().top等於127，是视窗原点至div的border外缘
的距离。类似地，body会等於15；doc会等於1。卷轴下移时，数值也会减少，
这也没问题。
div.clientTop等於128，是div的border外缘至padding外缘的距离，其实就是
border的高度(或宽度)。类似地，body会等於16，doc会等於2。卷轴下移时不
变。window.pageYOffset会随着卷轴下移而增加；doc.scrollTop等於0，不随
卷轴下移而变。
最後，$(div).offset().top等於125，不随卷轴下移而变。这个值是什麽意思
呢？doc的margin外缘至div的border外缘，再减去doc的border高度，就是这
个值。而当doc的border高度为0时，这个值的意思又变成了doc的margin外缘
至div的border外缘，再减去body的border高度。
然後再来看一下$(body).offset().top会等於8，这是body的margin高度，可
看成是由doc的padding内缘至body的border外缘的距离。这是由於body是被独
立出来写的，部份程式码如下：
var top = body.offsetTop;
if ( jQuery.support.doesNotIncludeMarginInBodyOffset ) {
top += parseFloat( jQuery.css(body, "marginTop") ) || 0;
}
结果，虽然$.fn.offset这个函式似乎是元素和文件原点间的距离，但文件原
点是指什麽？doc的margin外缘左上角？doc的padding内缘左上角？而且还要
减去doc或body之一的border宽度？
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 114.44.138.123
1F：→ tyf99:有把 default body margin 算进去了吗？ 09/22 04:21
※ 编辑: kilva 来自: 114.44.138.123 (09/22 07:05)
※ 编辑: kilva 来自: 114.44.138.123 (09/22 11:40)
※ 编辑: kilva 来自: 114.44.138.123 (09/22 16:48)