js scroll相關內容

前言

看下面這段代碼：

<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。