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

元素滚动scrollIntoView

// 获取元素
const element = document.getElementsByClassName(`adm-side-bar-item-active`)
const activeElement = element[0]  // 取第一个匹配的元素
// activeElement = document.getElementById(`adm-side-bar-item-active`)// getBoundingClientRect 返回一个 DOMRect 对象,该对象提供了元素的大小及其相对于视口(viewport)的位置信息;元素上、右、下、左边界到视口顶部的距离,元素的宽度与高度。
const rect = activeElement.getBoundingClientRect()  // 对 DOM 元素调用
console.log('rect视口位置', rect, rect.top)// 让这个元素滚动到视口中间
activeElement.scrollIntoView({// behavior: 'smooth', // 可选:平滑滚动block: 'center',     // 元素对齐到视口'start'顶部、'end'底部、'center'中间。
});

滚动监听

import { useThrottleFn } from 'ahooks'const { run: handleScroll } = useThrottleFn(() => {console.log('屏幕滚动监听');},{leading: true,trailing: true,wait: 100,})useEffect(() => {console.log('初始化', window.scrollY);window.addEventListener('scroll', handleScroll)return () => {console.log('卸载组件', window.scrollY);window.removeEventListener('scroll', handleScroll)}}, [])

http://www.dtcms.com/a/358528.html

相关文章:

  • 2025年09月计算机二级Python选择题每日一练——第十二期
  • GD32入门到实战22--红外NEC通信协议
  • node.js ---文件读写(FS模块)
  • shell脚本第五阶段---shell函数与正则表达式
  • 机器学习时间序列算法进行随机划分数据是不合适的!
  • 一键掌控三线资源:极简 Shell 脚本实现 CPU·磁盘·内存可视化巡检
  • 鸿蒙ArkTS 核心篇-14-条件表达式(三目运算符)
  • ans1语法的一个例子nt5inf.cat
  • openEuler2403安装部署PostgreSQL17
  • 开发中使用——鸿蒙CoreSpeechKit让文字发声
  • 118、【OS】【Nuttx】【周边】效果呈现方案解析:作用域?
  • python pyqt5开发DoIP上位机【源码】
  • Spring代理的特点
  • Photoshop - Ps Camera Raw 滤镜
  • 【Python+requests】解决Python requests中的ProxyError:SSL版本错误问题详解
  • C++中的临时对象与移动语义——深入理解与实践
  • 消费 $83,用Claude 实现临床护理系统记录单(所见即所得版)
  • 拦截器Intercepter
  • 基于单片机智能垃圾桶/垃圾分类/语音垃圾桶
  • Spring MVC 参数绑定的默认行为解析
  • MySQL错误1449: The user specified as a definer (‘root‘@‘%‘) does not exist
  • MIT 6.5840 (Spring, 2024) 通关指南——Lab 1: MapReduce
  • JC系列串口通信说明
  • day45-Ansible流程控制
  • 同步/异步日志库
  • 佳易王钟表维修养护管理系统:开启钟表维修高效管理新篇章​就#软件操作教程
  • Compare With Java And Python
  • springboot 实现不同接口指定上传文件大小
  • Linux 定时器:工作原理与实现机制深入分析
  • AI公司是怎样对权重和损失函数做处理的?