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

JS菌發表於2019-04-13
View

20190414002334.png

整理獲取 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() 返回的值見下圖：

20190412010215.png

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 菌公眾賬號

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

相關文章