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。