相信我，没有比这更全的scroll相关属性介绍了！

这是我参与更文挑战的第25天，活动详情查看： 更文挑战 !

? 概论

scroll很寻常，几乎每个页面可能都离不开滚动属性。但我们平时针对它的运用却不多，提到它相关的属性，可能大家最常用的就是overflow:hidden了吧（这还算是将它禁用了，实惨）。说实话，我也运用到的不多，那么大家就一起来补习下功课吧！

? Window中的scroll

?相关属性

? window.scrollX: 返回当前页面水平方向上已滚动的像素值（只读）。

? window.scrollY: 返回当前页面垂直方向上已滚动的像素值（只读）。

?相关方法

? window.scroll(): 将页面滚动至指定位置。

window.scroll(x,y)//水平方向滚动至x位置，垂直方向滚动至y位置。

window.scroll({
  left: x,//水平方向滚动x位置
  top: y,//垂直方向滚动至y位置
  behavior: 'smooth'//滚动行为：'smooth'平滑,'instant' 瞬移
})
复制代码

? window.scrollBy(): 将页面滚动指定距离。

window.scrollBy(x,y)//水平方向滚动x距离，垂直方向滚动y距离。

window.scrollBy({
  left: x,//水平方向滚动x距离（可取负值）
  top: y,//垂直方向滚动y距离（可取负值）
  behavior: 'smooth'//滚动行为：'smooth'平滑,'instant' 瞬移
})
复制代码

? window.scrollTo(): 同window.scroll()，不多BB。

? Element中的scroll

?相关属性

? El.scrollHeight: 返回当前元素的总高度（包含不可见的滚动区域）（只读）。

? El.scrollWidth: 返回当前元素的总宽度（包含不可见的滚动区域）（只读）。

? El.scrollLeft: 读写滚动条距元素最左侧的距离。

? El.scrollTop: 读写滚动条距元素最顶部的距离。

?相关方法

? El.onscroll:元素滚动时触发。

document.querySelector('body').onscroll = ()=>{
  console.log('在滚啦!')
}
复制代码

? El.scroll(): 将元素滚动至容器的指定位置。用法同window，不多BB。

? El.scrollBy():将元素在容器内滚动指定距离。用法同window，不多BB。

? El.scrollTo(): 同El.scroll()，不多BB。

? 结语

虽称最全，但其实一些兼容性较差的scroll属性也没有介绍。最后可能还剩一点scroll的表戚：scrollbar。这部分主要与CSS相关，我们下期介绍。