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

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

⭐️ 更多前端技術和知識點，搜索訂閱號 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 的技術文章，只談技術不談八卦 😊