// 获取元素
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)}}, [])