当前位置：首页 > article >正文

JS - 处理元素滚动

article 2024/11/20 17:31:50

业务功能中时常有元素滚动的功能，现在就总结一下一些常用的事件。

一、定位滚动元素

做一切滚动操作之前都应该先定位到滚动元素，再做其他操作，如滚动顶部，获取滚动距离、禁止滚动等。

把以下代码复制粘贴到浏览器 Console 面板,敲一下回车。然后滚动滚动条就可以看到打印：

 function findscroller(element){
        element.οnscrοll=function () {
            console.log(element)
        }
        Array.from(element.children).forEach(findscroller)
  }
  findscroller(document.body)

二、添加滚动事件

找到滚动的元素之后就可以添加事件，如，滚动到顶部

1. 使用Window.scrollTo API

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

2. 使用requestAnimationFrame

const scrollToTop = () => {
    let sTop = document.documentElement.scrollTop || document.body.scrollTop
    if (sTop > 0) {
        window.requestAnimationFrame(scrollToTop)
        window.scrollTo(0, sTop - sTop / 8)
    }
}

三、监听滚动事件

移除组件的时候记得卸载监听事件

 useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);