JavaScript 滾動條定位指定位置

admin發表於2020-04-05
JavaScript

當子元素尺寸超過父元素的時候能夠出現滾動條。

可能會根據需要將滾動條定位到某處，螞蟻部落的側欄導航就具有類似功能。

下面通過程式碼例項簡單演示一下簡單定位效果：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="https://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
#box{
  width: 150px;
  height: 80px;
  border: 2px dotted green;
  overflow: auto;
  position: relative;
}
ul {
  list-style-type: none;
  font-size :12px;
  margin: 0px;
}
</style>
<script>  
window.onload =()=> {
  let oBox = document.getElementById("box");
  let lis= oBox.getElementsByTagName("li");
  lis[3].style.color = "red";
  let top = lis[3].offsetTop;
  oBox.scrollTop = top;
}
</script>  
</head>  
<body>
<div id="box">
  <ul id="list">
    <li>螞蟻部落一</li>
    <li>螞蟻部落二</li>
    <li>螞蟻部落三</li>
    <li>螞蟻部落四</li>
    <li>螞蟻部落五</li>
    <li>螞蟻部落六</li>
    <li>螞蟻部落七</li> 
    <li>螞蟻部落八</li> 
    <li>螞蟻部落九</li>
    <li>螞蟻部落十</li> 
  </ul> 
</div>
</body>  
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/202004/05/101938n1yd21rzrk9t6urf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.上述程式碼可以將滾動條定位到第四個 li 元素。

（2）.其實就是內容向上規定指定距離，此距離是第四個 li 預設情況下距離 box頂部的距離。

（3）.let top = lis[3].offsetTop，通過 offsetTop 屬性獲取這個距離。

（4）.box 需要是定位元素。

（5）.oBox.scrollTop = top 向上滾動這個尺寸即可。

相關閱讀：

（1）.offsetTop 參閱 JavaScript offsetTop 一章節。

（2）.scrollTop 參閱 JavaScript scrollTop 一章節。

相關文章