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