獲取網頁相對邊距

1.getBoundingClientRect()

getBoundingClientRect 用於獲取某個元素相對於視窗的位置集合。集合中有 top, right, bottom, left 等屬性。

let client = e.target.getBoundingClientRect();

client.width // 寬度
client.height // 高度
client.top // 上邊距(相對可視區域上方)
client.right // 右邊距(相對可視區域右方)
client.bottom // 下邊距(相對可視區域下方)
client.left // 左邊距(相對可視區域左方)
client.x // x 軸座標/left (相對可視區域左方)
client.y // y 軸座標/top (相對可視區域上方)

2.獲取瀏覽器網頁的相關高度/寬度

• body 對象的寬/高

document.body.clientWidth // body 對象寬度
document.body.clientHeight // body 對象高度

• 可見區域寬/高

document.documentElement.clientWidth // 可見區域寬度
document.documentElement.clientHeight // 可見區域高度

• 網頁正文全文寬/高

document.body.scrollWidth
document.body.scrollHeight

• 網頁上方滾動的上/左側邊距

document.body.scrollTop // 上方滾動距離(手機/平板)
document.body.scrollLeft // 左側滾動距離(手機/平板)
document.documentElement.scrollTop // 上方滾動距離
document.documentElement.scrollLeft // 左側滾動距離
window.pageXOffset // 上方滾動距離 window.scrollX 別名
window.pageYOffset // 左側滾動距離 window.scrollY 別名

• 網頁寬/高(包括邊線的寬/高)

document.body.offsetWidth
document.body.offsetHeight
document.documentElement.offsetWidth
document.documentElement.offsetHeight

• 返回當前渲染窗口中和屏幕有關的屬性 window.screen (包括邊線和滾動條)

window.screen.width // 可用空間寬度
window.screen.height // 可用空間高度
window.screen.availWidth // 可用空間寬度
window.screen.availHeight // 可用空間高度
window.screen.availLeft // 可用空間左邊距離屏幕(系統電腦)左邊界的距離
window.screen.availTop // 可用空間上邊距離屏幕(系統電腦)上邊界的距離
window.screen.colorDepth
window.screen.pixelDepth
window.screen.orientation

注意: availLeft/availTop 大多數狀況下，返回 0。

若是你在有兩個屏幕的電腦上使用該屬性，在右側屏幕計算該屬性值時，返回左側屏幕的寬度（單位：像素），也即左側屏幕左邊界的 X 座標。

在 Windows 中，該屬性值取決於哪一個屏幕被設爲主屏幕，返回相對於主屏幕左邊界的 X 座標。就是說，即便主屏幕不是左側的屏幕，它的左邊界的 X 座標也是返回 0。若是副屏幕在主屏幕的左側，則它擁有負的 X 座標。

[1] [2] - 左屏幕 availLeft 返回 0，右側的屏幕返回左側屏幕的寬度；

[2] [1] - 左側屏幕 availLeft 返回該屏幕的 -width，右側屏幕返回 0；

let setY = window.screen.height - window.screen.availTop;
let setX = window.screen.width - window.screen.availLeft;
window.moveTo(setX, setY);

3.獲取元素對應的邊距屬性

• 獲取對象相對於版面或由父座標 offsetParent 屬性指定的父座標的屬性

let _dom = document.getElementById('container');

_dom.offsetHeight // 當前元素內容高度
_dom.offsetLeft // 當前元素相對父元素的偏移距離(不包括當前元素內邊距)
_dom.offsetTop // 獲取對象相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置   
event.clientX // 相對文檔的水平座標   
event.clientY // 相對文檔的垂直座標   
event.offsetX // 相對容器的水平座標   
event.offsetY // 相對容器的垂直座標

• 注意：offsetTop/offsetLeft 是相對定位父級的偏移量，若是須要可使用 getBoundingClientRect().top 與 scrollTop 解決現有問題