滚动操作

所有关于页面滚动的事情

监听事件

1
2
3
window.onscroll=()=>{
console.log(document.documentElement.scrollTop)
}

各种高度

滚动条高度

1
let h=document.documentElement.scrollTop

元素距离y顶端的距离

1
let h = dom.offsetTop

滚动到某个高度

1
document.body.scrollTop(100)

scrollTop() 只支持设置了高度的元素

居于底部

1
2
3
4
document.body.scrollTo(0, document.body.clientHeight)
setTimeout(() => {
document.documentElement.scrollTop = document.body.clientHeight
}, 100);

平滑滚动

CSS3特性

1
2
3
html,body{
scroll-behavior:smooth
}

JS全适配

1
2
3
4
5
import smoothscroll from 'smoothscroll-polyfill';
smoothscroll.polyfill();
window.__forceSmoothScrollPolyfill__ = true;

window.scroll({ top: window.innerHeight, left: 0, behavior: 'smooth' })