整理獲取 viewport 和 element 尺寸和位置方法

IE瀏覽器 · 發表 2019-04-14 00:29:34

摘要：整理獲取 viewport 和 element 尺寸和位置方法 :star:️ 更多前端技術和知識點，搜尋訂閱號 JS 菌訂閱視口頁面或視窗的位置和寬高獲取視口寬高下面方法是包括滾動條的寬高，不支援 IE8 window.innerWidth wi...

整理獲取 viewport 和 element 尺寸和位置方法

:star:️ 更多前端技術和知識點，搜尋訂閱號 JS 菌 訂閱

視口頁面或視窗的位置和寬高

獲取視口寬高

下面方法是包括滾動條的寬高，不支援 IE8

window.innerWidth
window.innerHeight

width + padding + border + 滾動條 另外 outerWidth 瀏覽器相容差，可獲取包括工具欄的寬高

頁面滾動位置

返回整個頁面的滾動的位置，pageYOffset/pageXOffset 與 scrollY/scrollX 返回的值一致，前者是後者的別名，建議使用前者，不支援 IE8

window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft

視窗在顯示器的位置

標準瀏覽器使用的是 screenX/screenY，IE 中使用的是 screenLeft/screenTop

window.screenLeft || window.screenX
window.screenTop || window.screenY

元素幾何尺寸和位置

元素佔用的空間尺寸和位置

getBoundingClientRect

使用方法 getBoundingClientRect() 返回的值見下圖：

IE 只返回 top right bottom left 四個值，如果需要 width height 則需要計算：

function getBoundingClientRect(elem) {
let rect = elem.getBoundingClientRect()
return {
top: rect.top,
right: rect.right,
bottom: rect.bottom,
left: rect.left,
width: rect.width || rect.right - rect.left,
height: rect.height || rect.bottom - rect.top
}
}

clientWidth/clientHeight

返回元素不含滾動條的尺寸，不包括邊框

document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight

如果是 document.documentElement，那麼返回的是不包含滾動條的視口尺寸
如果是 document.body，並且是在混雜模式下，那麼返回的是不包含滾動條的視口尺寸

clientLeft/clientTop

返回的是計算後的 CSS 樣式的 border-left-width/border-top-width 的值，就是邊框的寬度

offsetWidth/offsetHeight

同樣可以使用 offsetWidth/offsetHeight 來獲取元素包括滾動條和邊框的尺寸，這個方法返回元素本身的寬高 + padding + border + 滾動條

offsetLeft/offsetTop

相對於最近的祖先定位元素（CSS position 屬性被設定為 relative、absolute 或 fixed 的元素）的左右偏移值

offsetLeft/offsetTop 返回元素 X Y 座標值

計算元素的位置：

function getElementPosition(e) {
var x = 0, y = 0;
while (e != null) {
x += e.offsetLeft;
y += e.offsetTop;
e = e.offsetParent; // 獲取最近的祖先定位元素
}
return {
x: x,
y: y
};
}

元素內容的寬高和滾動距離

scrollWidth/scrollHeight

這個方法返回元素內容區域的寬高 + padding + 溢位內容尺寸

document.documentElement.scrollWidth || document.body.scrollWidth
document.documentElement.scrollHeight || document.body.scrollHeight

如果元素是 document.documentElement，返回的是視口滾動區域寬度和視口寬度中較大的那個
如果元素是 document.body，並且是在混雜模式下，那麼返回的是視口滾動區域寬度和視口寬度中較大的那個

scrollLeft/scrollTop

這個方法返回元素滾動條的位置

如果元素是根元素，那麼返回 window.scrollY 的值
如果元素是 body，並且在混雜模式下，那麼返回的是 window.scrollY 的值

因此可用於處理頁面滾動的距離的相容

請關注我的訂閱號，不定期推送有關 JS 的技術文章，只談技術不談八卦 :blush:

整理獲取 viewport 和 element 尺寸和位置方法