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

1,714 阅读2分钟

这是我参与更文挑战的第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相关,我们下期介绍。