常用元素位置與大小總結(jié)

JellyBool 發(fā)布于2019-08-19 18:21 / 2074人閱讀

摘要：偏移量元素在垂直方向占據(jù)的空間大小內(nèi)容高度上下上下元素在水平方向占據(jù)的空間大小內(nèi)容寬度左右左右元素外邊框距離的上內(nèi)邊框的距離元素外邊框距離的左內(nèi)邊框的距離是一個只讀屬性，返回一個指向最近的，指包含層級上的最近包含該元素的定位元素。

偏移量

offsetHeight: 元素在垂直方向占據(jù)的空間大小 => 內(nèi)容高度 + 上下padding + 上下boder

offsetWidth: 元素在水平方向占據(jù)的空間大小 => 內(nèi)容寬度 + 左右padding + 左右boder

offsetTop: 元素外邊框距離offsetParent的上內(nèi)邊框的距離

offsetLeft: 元素外邊框距離offsetParent的左內(nèi)邊框的距離

offsetParent 是一個只讀屬性，返回一個指向最近的（closest，指包含層級上的最近）包含該元素的定位元素。如果沒有定位的元素，則 offsetParent 為最近的 table 元素對象或根元素（標準模式下為 html；怪異模式下為 body）。當元素的 style.display 設(shè)置為 none 或定位為fixed時，offsetParent 返回 null

元素大小

clientWidth: 元素內(nèi)容及內(nèi)邊距所占空間寬度, 不包含滾動部分

clientHeight: 元素內(nèi)容及內(nèi)邊距所占空間高度, 不包含滾動部分

滾動大小

scrollLeft: 被隱藏在內(nèi)容區(qū)域左側(cè)的寬度(有橫向滾動條時)

scrollTop: 被隱藏在內(nèi)容上邊區(qū)域的高度(有豎向滾動條時)

scrollHeight: 在沒有滾動條時，元素內(nèi)容的高度

scrollWidth: 在沒有滾動條時，元素內(nèi)容的寬度

常用位置和大小計算（標準模式）

瀏覽器可視區(qū)寬高

// 不包含滾動條
// width
document.documentElement.clientWidth
// height
document.documentElement.clientHeight

// 包含滾動條(ie9+, 不是css規(guī)范)
// width
window.innerWidth
// height
window.innerHeight

文檔正文總寬高

// width
 Math.max(document.documentElement.scrollWidth, 
    document.documentElement.clientWidth);
// height 
Math.max(document.documentElement.scrollHeight, 
    document.documentElement.clientHeight);

// 注：由于各瀏覽器在scrollWidth和clientWidth表現(xiàn)不一致，  
// 所以需要取得最大值來獲得準確的值；

// all
function getPageWH(){
    var d = document.documentElement;
    var sw = d.scrollWidth,
        sh = d.scrollHeight,
        cw = d.clientWidth,
        ch = d.clientHeight;
    return {
        width: Math.max(sw, cw),
        height: Math.max(sh, ch)
    };
}

元素滾動隱藏區(qū)域?qū)捀?/p>

// top
el.scrollTop;
// left
el.scrollLeft;

//文檔滾動大小
// top
document.body.scrollTop
// left
document.body.scrollLeft

元素距離文檔頂部大小

// 當offsetParent為body時
// top
el.offsetHeight;

// 當offsetParent不為body時，需要一層層循環(huán)至offsetParent為null(通用方法)

// top
function getTop(el){
    var top = el.offsetTop,
        currentParent = el.offsetParent;
    while(currentParent != null){
        top += currentParent.offsetTop;
        currentParent = currentParent.offsetParent;
    }
    return top;
}

元素距離文檔左側(cè)大小(與上面類似)

// left
el.offsetLeft;

// left 
function getLeft(el){
    var top = el.offsetLeft,
        currentParent = el.offsetParent;
    while(currentParent != null){
        top += currentParent.offsetLeft;
        currentParent = currentParent.offsetParent;
    }
    return top;
}

元素距離視口頂部大小

// 元素距離視口頂部大小 = 元素距離文檔頂部大小 - 文檔正文垂直滾動高度；
function topToViewport(el){
    return getTop(el) - document.body.scrollTop;
}

元素距離視口左側(cè)大小

// 元素距離視口頂部大小 = 元素距離文檔左側(cè)大小 - 文檔正文水平滾動高度；
function leftToViewport(el){
    return getLeft(el) - document.body.scrollLeft;
}

判斷元素是否在可視區(qū)

// 文檔正文垂直滾動高度 < 可視區(qū)域范圍 < (瀏覽器可視區(qū)高度+文檔正文垂直滾動高度)
function isOnViewport(el){
    var offsetTop = getTop(el), // 元素距離頂部高度
        st = document.body.scrollTop, // 文檔正文垂直滾動高度
        vh = document.documentElement.clientHeight;  // 視口高度

    return (offsetTop > st) && (offsetTop < st + vh);
}

判斷是否滾動到底部

function isBottom(){
    var currentTop = document.body.scrollTop + document.documentElement.clientHeight;
    var totalTop = document.documentElement.offsetHeight;

    return currentTop == totalTop;
}