淺談JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight

發(fā)布時(shí)間：2020-07-17 09:27:20 來(lái)源：億速云閱讀：707 作者：小豬欄目：開(kāi)發(fā)技術(shù)

小編這次要給大家分享的是淺談JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight，文章內(nèi)容豐富，感興趣的小伙伴可以來(lái)了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

clientHeight，只讀

clientHeight可以用公式 CSS height + CSS padding - 水平滾動(dòng)條的高度 (如果存在) 來(lái)計(jì)算。

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

clientTop，只讀

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

類(lèi)似的屬性還有一個(gè)clientLeft，顧名思義……

offsetHeight，只讀

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

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

offsetTop，只讀

HTMLElement.offsetParent是一個(gè)只讀屬性，返回一個(gè)指向最近的包含該元素的定位元素。如果沒(méi)有定位的元素，則offsetParent為最近的table,table cell或根元素（標(biāo)準(zhǔn)模式下為html；quirks 模式下為body）。當(dāng)元素的style.display設(shè)置為 "none" 時(shí)，offsetParent返回null。

它返回當(dāng)前元素相對(duì)于其offsetParent元素的頂部的距離。

還是上面那張圖，div的offsetTop為20，因?yàn)閙argin-top是20，距離html頂部的距離是20...

scrollHeight，只讀

實(shí)話，這么久了，竟然一直搞錯(cuò)這個(gè)scroll相關(guān)屬性，其實(shí)它描述的是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>

因?yàn)橄拗屏烁冈氐母叨?，所以不能全部顯示子元素，設(shè)置了overflow之后，可以通過(guò)滾動(dòng)條的形式滑動(dòng)查看子元素。效果如圖1，如果沒(méi)有限制父元素的高度，那么效果將如圖2顯示。

淺談JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight （圖1）（圖2）

scrollHeight就是圖2的高度，沒(méi)有高度限制時(shí)，能夠完全顯示子元素時(shí)的高度（clientHeight）。

所以這里scrollHeight為220，計(jì)算：200+10+10=220

scrollTop，可寫(xiě)

是這些元素中唯一一個(gè)可寫(xiě)可讀的。

下面的圖是用微信截圖隨便畫(huà)的:D（不小心混入了一個(gè)光標(biāo)。。

淺談JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight

所以當(dāng)滾動(dòng)條在最頂端的時(shí)候，scrollTop=0，當(dāng)滾動(dòng)條在最低端的時(shí)候，scrollTop=115

這個(gè)115怎么來(lái)的（滾動(dòng)條高度是15，我量的），見(jiàn)下圖。（實(shí)為我主觀臆測(cè)，不保證準(zhǔn)確性。。。_(:з」∠)_

淺談JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight

scrollTop是一個(gè)整數(shù)。

如果一個(gè)元素不能被滾動(dòng)，它的scrollTop將被設(shè)置為0。

設(shè)置scrollTop的值小于0，scrollTop被設(shè)為0。

如果設(shè)置了超出這個(gè)容器可滾動(dòng)的值,scrollTop會(huì)被設(shè)為最大值。

判定元素是否滾動(dòng)到底：

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

返回頂部

element.scrollTop = 0

一個(gè)簡(jiǎn)單的返回頂部的時(shí)間，一個(gè)需要注意的地方是，動(dòng)畫(huà)是由快到慢的。

<!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>

看完這篇關(guān)于淺談JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight的文章，如果覺(jué)得文章內(nèi)容寫(xiě)得不錯(cuò)的話，可以把它分享出去給更多人看到。

向AI問(wèn)一下細(xì)節(jié)

淺談JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

淺談JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight