【React】可视区检测与平滑滚动实现

xixixin_2026-01-20 8:47

元素可视区检测和滚动定位是高频需求（如表单校验提示、锚点导航、异常元素定位等）

javascript 复制代码

// useRef 是 React 中用于获取 DOM 元素的核心 Hook
// 返回的 ref 对象在组件生命周期内保持不变
// 通过 targetRef.current 可直接访问绑定的 DOM 节点。
const targetRef = useRef(null)

// 判断元素是否在是窗口内
  const isInviteEleView = useCallback((element) => {
    if (!element) return false

    // 视窗尺寸获取
    const viewportHeight = window.innerHeight || document.documentElement.clientHeight
    const viewportWidth = window.innerWidth || document.documentElement.clientWidth

    // 四个条件同时满足 → 元素完全在视窗内
    return (
      // 元素顶部不超出视窗上边界
      element.top >= 0 &&
      // 元素左侧不超出视窗左边界
      element.left >= 0 &&
      // 元素底部不超出视窗下边界
      element.bottom <= viewportHeight &&
      // 元素右侧不超出视窗右边界
      element.right <= viewportWidth
    )
}, [])

useEffect(() => {
    // getBoundingClientRect() 获取目标元素的位置信息
    const currentEle = targetRef.current?.getBoundingClientRect()

    if (....) {
      // 判断元素是否在视窗内（滚动到元素位置）
      if (!isInviteEleView(currentEle)) {
        targetRef.current?.scrollIntoView({
          // 滚动方式：'auto'/'smooth'
          behavior: 'smooth',
          // 垂直方向对齐方式：'start'/'center'/'end'/'nearest'
          block: 'center',
          // 水平方向对齐方式：'start'/'center'/'end'/'nearest'
          inline: 'nearest',
        })
      }
    }
}, [isInviteEleView])

<>
    <div ref={targetRef}>test</div>
</>

应用场景扩展

该代码模式可适配多种前端场景：

表单校验：表单提交时，若某输入框校验失败，自动滚动到该输入框并高亮；
长列表导航：侧边栏锚点点击，滚动到对应内容区并确保内容在视窗居中；
异常提示：页面加载 / 操作异常时，滚动到异常元素位置，提升用户体验；
懒加载优化：结合可视区判断，实现图片 / 组件的懒加载（仅当元素进入视窗时加载）。