元素滚动scroll系列

scroll的含义是滚动，使用scroll系列的相关属性可以动态地获取该元素的滚动距离、大小等。scroll系列的相关属性如表1所示。

表1 scroll系列属性

属性	说明
scrollLeft	返回被卷去的左侧距离，返回数值不带单位
scrollTop	返回被卷去的上方距离，返回数值不带单位
scrollWidth	返回自身的宽度，不含边框。注意返回数值不带单位
scrollHeight	返回自身的高度，不含边框。注意返回数值不带单位

由表1可见，scroll系列使用与offset系列类似，都可以用来获取元素的高度和宽度，但是不含边框。scrollLeft和scrollTop获取的不再是元素偏移量，而是元素沿滚动条滚动的距离。

下面我们通过代码实现一个简单滚动条效果，具体HTML代码如下。

 1  <style>

 2   div {

 3    width: 200px;

 4    height: 200px;

 5    background-color: pink;

 6    overflow: auto;

 7    border: 10px solid red;

 8   }

 9  </style>

 10 <body>

 11  <div>

 12   我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容

 13   我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容

 14   我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容

 15   我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容

 16   我是内容我是内容我是内容我是内容我是内容

 17  </div>

 18  <script>

 19   var div = document.querySelector('div');

 20   console.log(div.scrollHeight);

 21  </script>

 22 </body>

上述代码中，第2~8行设置盒子宽度和高度及边框，并设置元素的overflow为auto生成滚动条。第11~17行代码定义div元素，在div元素内部写入内容，使内容超出div元素的高度。第19~20行代码首先通过querySelector获取到div元素对象，然后打印出当前元素的高度。

浏览器预览效果如图1所示。

图1 div元素滚动条高度

由图1可见，通过scrollHeight属性得到了div盒子中内容的高度，且不包含边框的大小。接下来修改代码，给盒子添加padding内边距。

div {

padding: 10px;

}

修改完成后，刷新页面，浏览器预览效果如图2所示。

图2 滚动条高度

由图2可见，在内容高度的基础上添加了padding的上下边距10px，得到了335。需要注意的是，将样式属性overflow设置为auto，当盒子内部的内容大于盒子的高度和宽度后，就会自动生成滚动条，此时scrollHeight获取到的是内容的真正的高度。