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