前言
看下面这段代码：
<div class=”parent” style=”height:200px;overflow:auto;background-color:yellow;”>
<div class=”children” style=”height: 300px;background-color: blue”>
</div>
</div>
父元素的高度小于子元素的高度，子元素的内容根据父元素的视区会有内容裁剪，这时我们设置父元素的 overflow 属性值为 auto，我们可以看到此时显示了滚动条。
那么问题来了，究竟是以哪个元素为视窗，滚动条是属于哪个元素呢？通过设置 background-color，可以知道，是以 parent 高度为视窗，滚动条也是属于 parent 元素的。
onscroll
看下面这段代码：
<script>
document.getElementsByClassName(‘parent’)[0].onscroll=function () {
console.log(‘—–>’.repeat(10));
}
</script>
onscroll 为元素的滚动条滚动时触发的事件，同时通过这段代码也验证了，滚动条是属于 parent 元素的。
scrollTop
scrollTop: 滚动条当前位置距离滚动条顶部的高度，也就是相对于父元素顶部，子元素被隐藏内容的高度；
只是 DOM 元素的一个属性（不包括 window 和 document）。
看下面这段代码：
<script>
console.log(document.body.scrollTop);
document.getElementsByClassName(‘parent’)[0].onscroll=function (e) {
console.log(‘—–>’.repeat(10));
console.log(‘*****>’.repeat(10),e.target.scrollTop);
}
</script>
首先在控制台会输出一个 0. // 这是 body 元素的 scrollTop 值；然后滚动滚动条的时候，会打印触发每次滚动事件时 scrollTop 的值。
现在我们知道了如何获取 scrollTop 的值，那么如何改变呢？
<script>
document.getElementsByClassName(‘parent’)[0].scrollTop=50;
</script>
我们可以看到当刷新页面时，滚动条直接显示在中间位置，所以我们通过直接给 scrollTop 赋值就可以改变滚动条的位置。
除了 scrollTop 属性外，DOM 元素还有 scrollHeight,scrollWidth,scrollLeft 等与滚动条相关的属性，这些属性表达的含义不同，但是用法都是相同，值得注意的是，这些属性都是只读的。
既然 DOM 元素可以通过 scrollTop 属性获取或是设置滚动条的位置，那么 document 和 window 如何操作呢？
scroll scrollBy scrollTo
这三个属性，都是 window 对象的方法, 也是全局的方法。window.scroll(x:XXX,y:XXX): 把窗口滚动到指定的位置；window.scrollTo(x,y): 与 window.scroll 相同 window.scrollBy(x,y): 把窗口相对 x,y 滚动
window.scrollBy(10,-20)// 把窗口向右移动 10px, 向上移动 20px。