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

JS - 处理元素滚动

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

一、定位滚动元素

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

把以下代码复制粘贴到浏览器 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);
    };
  }, []);

http://www.kler.cn/a/231416.html

相关文章:

  • [STM32 - 野火] - - - 固件库学习笔记 - - -十二.基本定时器
  • SpringBoot 日志
  • JVM_程序计数器的作用、特点、线程私有、本地方法的概述
  • 数据分析系列--⑤RapidMiner进行关联分析(中文数据案例)
  • WINDOWS安装eiseg遇到的问题和解决方法
  • sem_wait的概念和使用案列
  • IDEA创建Java类时自动添加注释(作者、年份、月份)
  • leetcode-比特位计数
  • STM32搭建开发环境
  • 2024.2.4 awd总结
  • 08-常用集合(容器)
  • ThinkPHP 中使用Redis
  • javascript设计模式之建造者
  • matlab去图像畸变
  • 谷歌seo搜索引擎优化有什么思路?
  • 6个好看的wordpress模板
  • 忍者切水果
  • 14.0 Zookeeper环球锁实现原理
  • electron实现软件(热)更新(附带示例源码)
  • HTML 标签
  • 【Git版本控制 02】分支管理
  • re:从0开始的CSS学习之路 5. 颜色单位
  • 第五篇【传奇开心果系列】vant开发移动应用示例:深度解读高度可定制
  • MySQL-事务(TRANSACTION)
  • [技术杂谈]如何下载vscode历史版本
  • c#cad 创建-正方形(四)