PJCHENder 未整理筆記

[筆記] Browser Coordinate System │ 瀏覽器座標系統

2017-09-26

[筆記] Browser Coordinate System │ 瀏覽器座標系統

@(Javascript)

keywords: offset, layer, page, client, coordinate system, 位置

示範程式碼與畫面 @ CodePen

offset:指游標到"容器"左上角的偏移量,實做上各瀏覽器有些不同。
client:指游標到 browser window 左上角的偏移量(不管 HTML document),滾動瀏覽器捲軸時,同樣位置座標相同。又稱 visual viewport
page:指游標到 document 左上角的偏移量,滾動瀏覽器捲軸時,同樣位置座標不同,又稱作 layout viewport

HTMLElement

要留意這裡的 offsetTop, offsetLeft 的效果和 mouseEvent 中的 offsetX, offsetY 有些不同。

1
2
3
4
5
/**
* offsetX, offsetY 是 Event 的屬性,指滑鼠到外層容器的距離。
**/
event.offsetX
event.offsetY
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* offsetLeft, offsetTop 是 Element 的屬性,指該 element 到 offsetParent 的距離。
* offsetWidth, offsetHeight 是 Element 的屬性,指該 element 的寬高。
*
* 在使用 offset 前最好確定 offsetParent 是誰
* 一般的情況下,offsetParent 會是 <body> 除非它的 outerContainer 有設定 position
**/
element.offsetParent

element.offsetTop
element.offsetLeft // 表示 Element 左邊距離與 offsetParent 左邊界距離

element.offsetHeight
element.offsetWidth

圖解offsetLeft、offsetTop、offsetWidth 和 offsetHeight @ Pixnet

Window

取得瀏覽器視窗大小

1
2
window.innerHeight
window.OuterHeight

img

取得瀏覽器捲軸的位置

1
2
window.scrollY
window.pageYOffset == window.scrollY // always true

window.pageYOffset 只是 window.scrollY 的另一個名稱(alias),本質上是一樣的。

如果要考慮跨瀏覽器兼容性(cross-browser capability)的話,建議使用下面的寫法:

1
var start = window.pageYOffset || document.documentElement.scrollTop

element.getBoundingClientRect()

回傳的 object 會包含 left, top, right, bottom, x, y ,width , height,其中除了 width 和 height 之外,其他的座標點都是相對於 visual viewport 的左上角。

1
rectObject = obj.getBoundingClientRect()

mouseEvents

offset

offsetX, offsetY 是指相對於觸發事件元素的左上角的偏移。但在不同的瀏覽器中其值又有所不同。在chrome opera, safari中是指外邊緣,即把該元素邊框的寬度計算在內,firefox ie則不包含邊框值。如下圖(一個具有藍色邊框的div)所示:

img

layer

layerX, layerY 是相對於 position 為 absolute 或 relative 的父元素外邊緣的距離。

最外層是一個綠色邊框的 div,裡面一層是一個紅色邊框的 div, 最裡面是一個藍色邊框的 div, 在藍色 div 上單擊,則該事件的 layerX 與layerY 相相對於最外層綠色外邊緣的距離(中間紅色的 div 的 position設有被設置為 absolute 或 relative, 所有不是相對該元素,反之則是相對於該元素):

img

pageX, pageY, x, y, clientX, clientY

pageX, pageY 是相對於文檔窗口的左上角,可以想成是相對於 <HTML> 的位置,又稱 layout viewport

x,yclientX, clientY 相同,其值是相對於可視窗口(瀏覽的可視區域)的左上角(viewport),又稱 visual viewport

screenX, screenY 則會根據裝置解析度而變,通常用不到。

示範程式碼與畫面 @ JSBin

img

img

此時可視窗口與文檔窗口重疊,pageX 等於 clientX, pageY 等於 clientY, 如果我們縮小瀏覽器窗口直到瀏覽器出現滾動條。此時可視窗口左上角位置不變,但文檔窗口左上角位置發生的變化,如下圖:

img

由此我們可以看出當瀏覽器沒有滾動條時(可視窗口與文檔窗口重合),pageX 與 clientX 相等,pageX 與 clientY 相等,如果出現下拉滾動條並向下拉動滾動條,文檔窗口向上滾動,如果出現左右滑動的滾動條並向右拉動滾動條,文檔窗口向左滾動,在文檔窗口滾動的情況下,pageX >= clientX, pageY >= clientY, x = clientX, y = clientY。

資料來源

javascript 中 x offsetX clientX screenX pageX的區別 @ 壹讀
What is the difference between screenX/Y, clientX/Y and pageX/Y? @ StackOverflow
圖解offsetLeft、offsetTop、offsetWidth 和 offsetHeight @ Pixnet

掃描二維條碼,分享此文章