前言
看下面這段代碼：
<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。