妹子.jpg

offset、scroll還有client這三個屬性總是讓人頭疼，好不容易記下沒過多久就又忘了晤碘。担平。。這次好好總結(jié)一下(＠_＠;)~

為了讓文章更顯而易見一點蹦哼，我們先定義段代碼：

  <div class="box">
      <div class="box1"></div>
  </div>
  <div class="box2"></div>

如上所示，我們有三個盒子。
然后再來定義樣式：

        .box {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            padding: 50px 100px;
            background-color: orange;
            position: relative;
        }
        .box1 {
            width: 100px;
            height: 100px;
            border: 10px solid transparent;
            background-color: green;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 250px;
            top: 200px;
        }

這樣沦零，我們就可以得到如下的頁面：

template.png

其中橙色的box是最外一層的大盒子，包含著綠色的box1货岭，藍(lán)色的box2和box在同一級路操。
好了，有了上面這個簡單（丑陋）的頁面千贯，我們就可以好好的來研究一下了~

offset系列

打印出上面每個盒子對應(yīng)offset系列的屬性值：

offsetLog.png

由上圖我們可以看出屯仗，offsetWidth返回的是元素包含padding和border的寬度，offsetHeight一樣搔谴，只不過返回的是高度而已魁袜，但offsetLeft和offsetTap返回的值不太明顯，但其實仔細(xì)看敦第，會發(fā)現(xiàn)他們返回的都是相對于offsetParent元素的值峰弹，當(dāng)offsetParent為body時，返回相對body的距離芜果，offsetParent為box時鞠呈，返回相對于box的距離。

我們來查看一下offset系列屬性的定義：

• offsetWidth: 只讀屬性右钾，返回一個元素的布局寬度蚁吝，包括邊框(border)、內(nèi)邊距(padding)霹粥、內(nèi)容(content)和豎直滾動條的寬度(如果有的話)灭将。
• offsetHeight：只讀屬性，返回一個元素的像素高度后控，包括邊框(border)庙曙、內(nèi)邊距(padding)、內(nèi)容(content)和豎直滾動條的寬度(如果有的話)浩淘。
• offsetLeft：只讀屬性捌朴，返回元素相對于offsetParent元素的左邊界對應(yīng)的像素值吴攒。
• offsetTop: 只讀屬性，返回元素相對于offsetParent元素的頂部距離砂蔽。
• offsetParent：只讀屬性洼怔，返回一個指向最近的包含該元素的定位元素。

這樣就很清楚了左驾，不過怎么知道offsetWidth會包含滾動條的寬度镣隶？
其實很簡單，在box的樣式里加一行代碼：

.box {
  overflow: hidden;
}

這樣就好了诡右，最后打印的結(jié)果并沒有變化安岂。

對了， 還有offsetParent屬性帆吻，如果沒有定位的父元素怎么辦呢域那？

由上面的例子可以看出，如果沒有定位的父元素猜煮，則默認(rèn)是body元素次员。

其實按照MDN的說法，如果沒有定位的父元素王带，則offsetParent為最近的table淑蔚、table-cell或根元素(body元素)。

最后愕撰，要注意的是：

offsetTop和offsetLeft在計算時不考慮父元素的邊框

scroll系列

我們還是先打印出scroll系列屬性的值來看看~

scrollLog.png

\

乍一看好像和offset沒啥區(qū)別束倍。。盟戏。不過仔細(xì)看看，會發(fā)現(xiàn)scrollWidth和scrollHeight不會計算元素的邊框(border)甥桂。

但是scrollTop和scrollLeft一直是0是什么鬼呢( ??? )?柿究？

想不出原因的話，我們讓元素滾動一下試試~(畢竟scroll黄选，scroll蝇摸，一直在叫我們滾嘛。办陷。貌夕。( ╯□╰ )囧)
給之前的樣式表添加如下樣式：

        .box {
            overflow: scroll;
        }
        .box1 {
            height: 1000px;
        }

就是給box加了個滾動條，把box1的高度改為了1000px民镜。

現(xiàn)在我們的圖就是這樣了：

image.png

為了看清楚scrollTop的值啡专，為box元素添加事件監(jiān)聽器，讓box在滾動的時候打印一下scrollTop~

box.addEventListener("scroll", function(e) {
    console.log("scrollTop", this.scrollTop);
});

可以得到如下的結(jié)果：

image.png

當(dāng)我從上向下移動滾動條的時候制圈，scrollTop的值在逐漸增大们童。

這下明白了畔况，原來scrollTop獲得的是元素滾動的距離。換句話說慧库，也就也是豎直滾動條到元素頂部的距離跷跪。

scrollLeft類似，就不再說了齐板。

做個小總結(jié)：

• scrollWidth: 只讀屬性吵瞻。一個元素內(nèi)容寬度的度量，包括由于溢出導(dǎo)致的視圖中不可見內(nèi)容(不包括滾動條和border)甘磨。
• scrollHeight: 只讀屬性橡羞。一個元素內(nèi)容高度的度量，包括由于溢出導(dǎo)致的視圖中不可見內(nèi)容(不包括滾動條和border)宽档。
• scrollTop: 讀取元素滾動條到元素頂部的距離(不包括滾動條和border)
• scrollLeft: 讀取元素滾動條到元素左邊的距離(不包括滾動條和border)

這里補(bǔ)充一下：

offset系列屬性是包含滾動條的尉姨。

client系列

直接看結(jié)果：

image.png

可以看到，clientHeight和clientWidth和offset差不多吗冤，只不過不包含邊框的值(也不包含滾動條)又厉。

而clientTop和clientLeft則返回了元素的邊框?qū)挾取?/p>

MDN的描述如下：

• clientHeight: 只讀屬性，對于沒有定義CSS或者內(nèi)聯(lián)布局盒子的元素為0椎瘟，同時它是元素內(nèi)部的高度(單位像素)覆致，包含內(nèi)邊距，但不包括水平滾動條肺蔚、邊框和外邊距煌妈。
• clientWidth: 元素的內(nèi)部寬度，以像素計宣羊。該屬性包括內(nèi)邊距璧诵，但不包括垂直滾動條（如果有）、邊框和外邊距仇冯。
• clientTop: 只讀元素之宿，一個元素頂部邊框的寬度（以像素表示）。不包括頂部外邊距或內(nèi)邊距苛坚。
• clientLeft: 表示一個元素的左邊框的寬度比被，以像素表示。

要注意的是：

如果元素的文本方向是從右向左（RTL, right-to-left）泼舱，并且由于內(nèi)容溢出導(dǎo)致左邊出現(xiàn)了一個垂直滾動條等缀，則該屬性包括滾動條的寬度。

最后娇昙，我們拓展一點內(nèi)容

1. 關(guān)于event事件的幾個屬性
   • clientX和clientY: 相對于瀏覽器（可視區(qū)左上角0,0）的坐標(biāo)尺迂，不包含滾動區(qū)域。
   • screenX和screenY: 相對于設(shè)備屏幕左上角（0,0）的坐標(biāo)。
   • offsetX和offsetY: 相對于事件源左上角（0,0）的坐標(biāo)枪狂，不包括border危喉。
   • pageX和pageY: 相對于整個網(wǎng)頁左上角（0,0）的坐標(biāo)，包含滾動區(qū)域州疾。
2. window相關(guān)寬高屬性
   • window.outerHeight：獲取整個瀏覽器窗口的高度（單位：像素）辜限，包括側(cè)邊欄（如果存在）、窗口鑲邊（window chrome）和窗口調(diào)正邊框严蓖。包含調(diào)試窗及瀏覽器邊框
   • window.outerWidtht：表示整個瀏覽器窗口的寬度薄嫡，包括側(cè)邊欄（如果存在）、窗口鑲邊（window chrome）和調(diào)正窗口大小的邊框颗胡。包含調(diào)試窗及瀏覽器邊框
   • window.innerHeight：瀏覽器窗口的視口（viewport）高度（以像素為單位）毫深，如果存在水平滾動條，則包括它毒姨。不包含調(diào)試窗及瀏覽器邊框
   • window.innerWidth：瀏覽器視口（viewport）寬度（單位：像素）哑蔫，如果存在垂直滾動條則包括它。不包含調(diào)試窗及瀏覽器邊框
   • window.screen.width：聲明了顯示當(dāng)前瀏覽器的屏幕的寬度弧呐，以像素計
   • *window.screen.height：聲明了顯示當(dāng)前瀏覽器的屏幕的高度闸迷，以像素計
   • *window.screen.availHeight：聲明了顯示瀏覽器的屏幕的可用高度，以像素計俘枫。除去我們底部任務(wù)欄外的屏幕高度
   • *window.screen.availWidth：聲明了顯示瀏覽器的屏幕的可用寬度腥沽，以像素計
   • *window.screenLeft：只讀屬性，返回窗口的左上角在屏幕上的x坐標(biāo)鸠蚪。在Firefox等瀏覽器中使用的是screenX屬性今阳。
   • *window.screenTop：只讀屬性，返回窗口的左上角在屏幕上的y坐標(biāo)茅信。在Firefox等瀏覽器中使用的是screenY屬性盾舌。