JavaScript scrollTop

红太狼 2020-05-27 13:14 646阅读 0赞

# JavaScript scrollTop

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.dandelioncloud.cn/" />
<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>
```

代码运行效果截图如下：

![](/images/1590585246301.png)

代码分析如下：

（1）.首先，设置 scrollTop 属性值为 100，然后再取值，但最终打印效果为 0 。

（2）.这是因为，出现滚动效果的前提是出现滚动条，所以上述代码谈不上滚动。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.dandelioncloud.cn/" />
<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>
```

代码运行效果截图如下：

![](/images/1590585226521.png)

代码分析如下：

（1）.父元素在垂直方向出现滚动条，这是发生垂直滚动的先决条件。

（2）.为 box 元素 scrollTop 属性赋值，接受的值是纯数字，返回值也是如此，否则报错。

（3）.运行代码之后，滚动条会被定位于某处。

（4）.图中箭头指向的部分的尺寸，并不是真正滚动的尺寸，只滚动的一个标识而已。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.dandelioncloud.cn/" />
<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）。