JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學習筆記

更新時間：2020年07月15日 14:47:18 作者：wenr

這篇文章主要介紹了JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學習筆記，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

全文參考：https://github.com/iuap-design/blog/issues/38 、MDN

clientHeight，只讀

clientHeight可以用公式 CSS height + CSS padding - 水平滾動條的高度 (如果存在) 來計算。

如圖，這樣一個div，它的clientHeight為95，計算：50(height)+30(padding-top)+30(padding-bottom)-15(經(jīng)測量滾動條高度就是15)=95

clientTop，只讀

一個元素頂部邊框的寬度（以像素表示）。嗯。。就只是border-top-width

類似的屬性還有一個clientLeft，顧名思義……

offsetHeight，只讀

元素的offsetHeight是一種元素CSS高度的衡量標準，包括元素的邊框、內(nèi)邊距和元素的水平滾動條（如果存在且渲染的話），是一個整數(shù)。

還是上面的圖，div的offsetHeight為112。計算：50+60(上下內(nèi)邊距)+2(上下邊框)=112

offsetTop，只讀

HTMLElement.offsetParent是一個只讀屬性，返回一個指向最近的包含該元素的定位元素。如果沒有定位的元素，則offsetParent為最近的table,table cell或根元素（標準模式下為html；quirks 模式下為body）。當元素的style.display設置為 "none" 時，offsetParent返回null。

它返回當前元素相對于其offsetParent元素的頂部的距離。

還是上面那張圖，div的offsetTop為20，因為margin-top是20，距離html頂部的距離是20...

scrollHeight，只讀

實話，這么久了，竟然一直搞錯這個scroll相關屬性，其實它描述的是outer的屬性，而窩一直取inner的屬性值，難怪scrollTop一直是0。。。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  #outer {
   margin: 100px 50px;
   background: url(http://images.cnblogs.com/cnblogs_com/wenruo/873448/o_esdese.jpg);
   height: 100px;
   width: 50px;
   padding: 10px 50px;
   overflow: scroll;
  } 
  #inner {
   height: 200px;
   width: 50px;
   background-color: #d0ffe3;
  }
 </style>
</head>
<body>
 <div id="outer">
  <div id="inner"></div>
 </div>
</body>
</html>

因為限制了父元素的高度，所以不能全部顯示子元素，設置了overflow之后，可以通過滾動條的形式滑動查看子元素。效果如圖1，如果沒有限制父元素的高度，那么效果將如圖2顯示。

（圖1）（圖2）

scrollHeight就是圖2的高度，沒有高度限制時，能夠完全顯示子元素時的高度（clientHeight）。

所以這里scrollHeight為220，計算：200+10+10=220

scrollTop，可寫

是這些元素中唯一一個可寫可讀的。

下面的圖是用微信截圖隨便畫的:D（不小心混入了一個光標。。

所以當滾動條在最頂端的時候，scrollTop=0，當滾動條在最低端的時候，scrollTop=115

這個115怎么來的（滾動條高度是15，我量的），見下圖。（實為我主觀臆測，不保證準確性。。。_(:з」∠)_

scrollTop是一個整數(shù)。

如果一個元素不能被滾動，它的scrollTop將被設置為0。

設置scrollTop的值小于0，scrollTop被設為0。

如果設置了超出這個容器可滾動的值,scrollTop會被設為最大值。

判定元素是否滾動到底：

element.scrollHeight - element.scrollTop === element.clientHeight

返回頂部

element.scrollTop = 0

一個簡單的返回頂部的時間，一個需要注意的地方是，動畫是由快到慢的。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>返回頂部</title>
 <style>
  #outer { height: 100px; width: 100px; padding: 10px 50px; border: 1px solid; overflow: auto; }
 </style>
</head>
<body>
 <div id="outer">
  <div id="inner"></div>
 </div>
 <button onclick="toTop(outer)">返回頂部</button>
 <script>
  function toTop(ele) {
   // ele.scrollTop = 0;
   let dy = ele.scrollTop / 4; // 每次更新scrollTop改變的大小
   if (ele.scrollTop > 0) {
    ele.scrollTop -= Math.max(dy, 10);
    setTimeout(() => {
     toTop(ele, dy);
    }, 30);
   }
  }
  // 初始化
  window.onload = () => {
   for (let i = 0; i < 233; i++) inner.innerText += `第${i}行\(zhòng)n`;
  }
 </script>
</body>
</html>

到此這篇關于JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學習筆記的文章就介紹到這了,更多相關JavaScript scrollTop scrollHeight offsetTop offsetHeight內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: