作者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)