JavaScript scrollTop

admin發表於2019-01-03
JavaScript

scrollTop 返回或者設定元素內容向上滾動的尺寸，可讀寫屬性。

設定或返回值是純數字，不能帶有單位（預設以畫素計）。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
dom.scrollTop = num

再強調一下 scrollTop 是可讀寫屬性，返回值或者賦值都是純數字。

瀏覽器支援：

（1）.IE 瀏覽器支援此屬性。

（2）.edge 覽器支援此屬性。

（2）.谷歌瀏覽器支援此屬性。

（3）.火狐瀏覽器支援此屬性。

（4）.opera 瀏覽器支援此屬性。

（5）.safari 瀏覽器支援此屬性。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box {
  width: 150px;
  height: 200px;
  border: 2px dotted #ccc;
  margin: 0px auto;
  overflow: auto;
}
#inner {
  width: 100px;
  height: 150px;
  line-height: 150px;
  border: 2px dotted green;
  text-align: center;
  font-size: 12px;
  color: green;
  margin-top: 20px;
}
</style>
<script> 
window.onload = ()=> {
  let oBox = document.getElementById("box");
  let oInner = document.getElementById("inner");
  oBox.scrollLeft = 100;
  oInner.innerHTML = oBox.scrollTop;
}
</script> 
</head>
<body> 
<div id="box">
  <div id="inner"></div>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202004/03/164834oiwsinuxibb5p96u.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.首先，設定 scrollTop 屬性值為 100，然後再取值，但最終列印效果為 0 。

（2）.這是因為，出現滾動效果的前提是出現滾動條，所以上述程式碼談不上滾動。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box {
  width: 150px;
  height: 200px;
  border: 2px dotted #ccc;
  overflow: auto;
}
#inner {
  width: 50px;
  height: 350px;
  border: 2px dotted green;
}
</style>
<script> 
window.onload = ()=> {
  let oBox = document.getElementById("box");
  let oinner = document.getElementById("inner");
  oBox.scrollTop = 50;
}
</script> 
</head>
<body> 
<div id="box">
  <div id="inner"></div>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202004/03/164903s4ms3m4ms26b596x.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.父元素在垂直方向出現滾動條，這是發生垂直滾動的先決條件。

（2）.為 box 元素 scrollTop 屬性賦值，接受的值是純數字，返回值也是如此，否則報錯。

（3）.執行程式碼之後，滾動條會被定位於某處。

（4）.圖中箭頭指向的部分的尺寸，並不是真正滾動的尺寸，只滾動的一個標識而已。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box {
  width: 150px;
  height: 200px;
  border: 2px dotted #ccc;
  overflow: auto;
}
#inner {
  width: 50px;
  height: 350px;
  margin-top: 20px;
  padding-top: 10px;
  border: 2px dotted green;
}
</style>
<script> 
window.onload = ()=> {
  let oBox = document.getElementById("box");
  let scrollNum = 350+10+2+2-(200-20);;
  function done(){
    oBox.scrollTop++;
    if(scrollNum == oBox.scrollTop){
      clearInterval(flag);
    }
  }
  let flag = setInterval(done,10);
}
</script> 
</head>
<body> 
<div id="box">
  <div id="inner"></div>
</div>
</body>
</html>

上述程式碼實現滾動條緩慢到達底部的效果。

程式碼分析如下：

（1）.每一次呼叫 done()，實現 scrollTop 屬性值加 1，也就是向上滾動 1px。

（2）.通過定時器函式 setInterval() 每隔10 毫秒呼叫一次 done()，實現連續滾動效果。

（3）.當滾動到滾動到最頂端之後，要停止定時器函式的執行，否則就是白白消耗資源。

（4）.向上滾動的尺寸是 inner 在垂直方位停留在 box 外部的尺寸，inner 在垂直方位自身尺寸（不包括外邊距）是350（height）+ 2（border-top）+ 2（border-bottom）+ 10（padding-top）= 364；保留在 box 內部的 inner 尺寸是 box 的高度減去 inner 的上外邊距，也就是200 - 20。最終，inner 恰好滾動到 box 內部需要的尺寸（inner 位於 box 之外的尺寸）是 364 -（200-20）。

相關文章