如何使用 onscroll / scrollTo() / scrollBy()
定位父级：（定位父级offsetParent的定义是：与当前元素最近的经过定位(position不等于static)的父级元素）
display:absolute; 相对定位
display:relative; 绝对定位
.... 注意：当元素自身有fixed固定定位时，我们知道固定定位的元素相对于视口进行定位，此时没有定位父级，offsetParent的结果为null （IE为<body>）
定位父级，可读，可写 （let box = box1.offsetParent）
onscroll ：鼠标滚轮事件
一定要有滚动条的时候才能用。。。。
可以给定位父级加：overflow:auto / overflow-y:scroll / ...... 。当auto时，box_child 的高 / 宽度要大于 box_father
此时就能出现滚动条，并且可以滚动了
<div id="box_father"> <div id="box_child"></div> </div>
box2.onscroll = function(){
xxx
}
scroll()：
同下
scrollTo() ：
专门用来写滚动条的距离的，有滚动条的前提下才能使用，让元素滚动到指定的位置，单位px
let box2 = docoument.getElementById("box2")
box2.scrollTo(0,100) //移动到绝对位置Y轴为100px的位置
scrollBy() ：
方法可把内容滚动指定的像素数。
注意： 要使此方法工作 window 滚动条的可见属性必须设置为true！
语法：scrollBy(xnum,ynum)
实例：
function scrollWindow(){ window.scrollBy(100,100); }
测试比较 scroll()、scrollTo()、scrollBy()三个方法的区别：
<body>
<div id="div_father">
<div id="div_child"></div>
</div>
<script>
document.onclick = function () {
clearInterval(scroll);
}
let scroll = setInterval(() => {
console.log(div_child)
// div_father.scroll(0, 100) //移动到绝对位置的100px处
// div_father.scrollTo(0, 100) //移动到绝对位置的100px处
// div_father.scrollTop = 100; //移动到绝对位置的100px处
div_father.scrollBy(0, 100) //移动到相对位置的100px处（基于上一次的位置再次移动）
div_child.innerText = div_father.scrollTop
}, 1000)
</script>
</body>
测试效果如下：
- 1.scrollBy() 会使元素每隔一秒从当前的滚动条位置向下滚动10px，这是一个设置相对滚动条位置的方法。
- 2.scrollTo() 和 scroll() 方法是一样的，都是将元素滚动到指定位置，它们都是设置绝对滚动条位置。
另：元素还有一个设置或读取滚动条位置的属性：element.scrollTop，这是一个读写属性，如 element.scrollTop = 50; 便是设置元素的滚动条位置为 50px;
