圖文小解clientX, scrollX及offsetX的區別

它們中的每一類都有四個屬性，以clientX爲例，有clientLeft, clientTop, clientWidth和clientHeight。接下來，會先用圖文一類一類的解釋各個屬性表明的含義，最後再加以區分。

1、clientX —— 對元素自己的度量(measurement)

如上圖所示，clientHeight/clientWidth都是不包含滾動條，只有padding與content的數值。而clientTop/clientLeft分別表明這元素的上方border和左方border的厚度（border-width）。其中clientLeft有一些特殊狀況會包含到scrollBar的寬度，即文本方向設置爲「從右向左」，且滾動條位置在左邊。

2、scrollX —— 與元素滾動相關

如上圖所示，scrollHeight包含padding和content（包括由於溢出而沒有顯示出來的content），不包括border，margin和滾動條的值。水平方向沒有滾動狀況，scrollWidth數值就和clientWidth同樣。

scrollHeight及scrollWidth是read-only，不可賦值的，可是scrollTop和scrollLeft倒是能夠賦值，也常被用來實現元素滾動到某個位置的功能。

scrollTop的值是從元素頂部，到該元素可見區域的頂部，這兩處的距離。

An element scrollTop is a measurement of the distance from the element top to its topmost visible content.

scrollLeft的存在和scrollTop很類似，不過有一個狀況，當文本方向是「從右向左」，且滑動條在最右邊時，scrollLeft值爲0，向左滑值將變爲負。這也好理解，由於這種狀況，至關於內容向右滑動了，因此scrollLeft爲負值。

3、offsetX —— 對父級（positioned）的偏移量

這裏的父級是最近的position屬性不爲static的祖先節點。

如圖，offsetWidth和offsetHeight的數值和clientX, scrollX不一樣，包含了border和滾動條（若是有的話），若是有因滾動而未顯示的內容，也會被包含。

offsetLeft指的是子元素左上角到其父節點左邊的這段距離。也就是圖示的子級的border外邊緣到父級的padding外邊緣。offsetTop同理。

MDN裏對這兩個屬性的解釋摘抄以下：

offsetLeft returns the number of pixels that the upper left corner of current element is offset to the left within HTMLElement.offsetParent node.

offsetTop returns the number of pixels from the top of the closest relatively positioned parent element.

在MDN裏，還有一些對塊級元素及行級元素下offsetLeft的不一樣表現，能夠點擊這裏查看。

4、三者的對比

好了，終於能夠作一些比較了，這裏就是否只讀，數值包含的內容，所屬API等方面作比較，並作成一個表格，方便查看。

名稱	是否只讀	包含的內容	是否包含border	是否包含滾動條	所屬API
clientHeight/clientWidth	是	content/padding	否	否	Element
clientTop/clientLeft	是	border-width	是border自己沒錯了	否	Element
scrollHeight/scrollWidth	是	content/padding/因滾動而未顯示的部分	否	否	Element
scrollTop/scrollLeft	否	滾動的內容	否	否	Element
offsetHeight/offsetWidth	是	content/padding/border/滾動條	是	是	HTMLElement
offsetTop/offsetLeft	是	子級border外邊緣到父級padding外邊緣	否	否	HTMLElement