[jQuery]高度/寬度/偏移/捲動/位置

[轉貼]

Document & Window 的高度與寬度：

$(window).height();
瀏覽器高度，相當於最後一個「工具列」下方、到「狀態列」上方的距離。

$(document).height();
整個HTML文件的總高度，可能小於或大於window高度。
改變瀏覽器大小時，window高度會改變，而document高度不會改變。

$(window).width(); //瀏覽器寬度
$(document).width(); //HTML文件的寬度


Scroll Offsets(滾動偏移)：(obj_id 為 物件ID)

$(“#obj_id”).scrollTop();
取得Scroll bar已往下捲動的像素(pixel)，例如往下捲動50px，此函數會return 50

$(“#obj_id”).scrollTop(50);
設定Scroll bar欲捲動到的像素位置，例如欲捲動到50px處，相當於內部對象上方隱藏50px

$(“#obj_id”).scrollLeft();
取得Scroll bar已往右捲動的像素(pixel)，例如往右捲動50px，此函數會return 50

$(“#obj_id”).scrollLeft(50);
設定Scroll bar欲捲動到的像素位置，例如欲捲動到50px處，相當於內部對象左方隱藏50px

Offset(偏移)：

$(“#obj_id”).offset(options)；參數 options 可省略

官方解釋：獲得一個元素相對于viewport(視口)的位置。為了精確計算margins,borders,和padding的像素值。只能用于可見元素。

返回：object
擁有表示偏移值 top 和 left 屬性的對象，如果參數指定scroll:true，將返回更多的兩個屬性scrollTop 和 scrollLeft，表示滾動偏移位置。

參數：options 對象，配置偏移計算的方式

margin(Boolean),是否將元素的空白邊納入計算。默認：true;
border(Boolean),是否將元素的邊框納入計算，默認：False;
padding(Boolean)，是否將元素的填充納入計算，默認:False;
scroll(Boolean),是否計算元素的滾動偏移，默認：True;

$(“#obj_id”).offset();
$(“#obj_id”).offset({border:true,margin:true});

Postion(相對位置)：

$(“#obj_id”).position();
相對於父元素的偏移，返回為物件{top:34,left:5} (經測試，會取得距頁面頂端的像素)
ex. $(“#obj_id”).position().top; 即可取得距離頁面頂端的距離