React如何检测元素进入指定可滚动容器(如Modal)的可视区域？

问题原因排查 #

你之前的判断函数始终返回false，核心是两个错误：

1. 普通DOM元素没有innerHeight/innerWidth属性，这两个是window对象独有的属性，DOM元素要获取自身可视区域高度应该用clientHeight/clientWidth
2. getBoundingClientRect()返回的是元素相对于全局浏览器视口的坐标，不是相对于你的自定义滚动容器的坐标，所以直接和0做对比肯定计算错误，需要先拿滚动容器的坐标做差值校准。

推荐实现方案 #

优先使用浏览器原生IntersectionObserver API实现，性能远好于手动监听scroll事件，且天然支持指定自定义滚动根容器，不需要手动计算坐标。以下是封装好的React Hook：

import { useEffect, useRef, useState } from 'react'

/**
 * 检测元素是否进入指定滚动容器的可视区
 * @param {Object} targetRef 要检测的目标元素ref
 * @param {Object} rootRef 自定义滚动容器的ref
 * @param {Number} threshold 交叉触发阈值 0-1，0表示元素刚进入可视区就触发
 * @returns {Boolean} 目标元素是否在可视区内
 */
function useInScrollView(targetRef, rootRef, threshold = 0) {
  const [isVisible, setIsVisible] = useState(false)
  const observerRef = useRef(null)

  useEffect(() => {
    const targetEl = targetRef.current
    const rootEl = rootRef.current
    if (!targetEl || !rootEl) return

    // 清理之前的观察实例
    if (observerRef.current) observerRef.current.disconnect()

    // 初始化交叉观察器
    observerRef.current = new IntersectionObserver(
      (entries) => {
        const [entry] = entries
        setIsVisible(entry.isIntersecting)
      },
      {
        root: rootEl, // 指定自定义滚动容器为根，替代默认的全局window视口
        threshold
      }
    )

    observerRef.current.observe(targetEl)

    return () => {
      if (observerRef.current) observerRef.current.disconnect()
    }
  }, [targetRef, rootRef, threshold])

  return isVisible
}

业务代码接入示例 #

不需要手动监听scroll事件，直接使用上述Hook即可实现无限滚动逻辑：

const lastItemRef = useRef()
const scrollRef = useRef()
const [users, setUsers] = useState([])
const [isLoading, setIsLoading] = useState(false)
const [hasMore, setHasMore] = useState(true)

// 检测列表最后一个元素是否进入滚动容器可视区
const isLastItemVisible = useInScrollView(lastItemRef, scrollRef)

// 加载更多逻辑
useEffect(() => {
  // 只有当元素可见、不在加载中、还有更多数据时才触发请求
  if (isLastItemVisible && !isLoading && hasMore) {
    fetchMoreUsers()
  }
}, [isLastItemVisible, isLoading, hasMore])

// 加载更多接口请求
const fetchMoreUsers = async () => {
  setIsLoading(true)
  try {
    const newUsers = await 你的加载更多接口请求()
    setUsers(prev => [...prev, ...newUsers])
    // 接口返回空数组说明没有更多数据了
    if (newUsers.length === 0) setHasMore(false)
  } finally {
    setIsLoading(false)
  }
}

// 渲染逻辑和你原有逻辑保持一致
return (
  <div className="content">
    <ul ref={scrollRef} className="h-96 overflow-scroll">
      {users.map((user, index) => 
        <ItemMarkup
          ref={users.length === index + 1 ? lastItemRef : null}
          key={user.id} 
          user={user} 
        />
      )}
      {isLoading && <li>加载中...</li>}
      {!hasMore && <li>没有更多数据了</li>}
    </ul>
  </div>
)

内容的提问来源于stack exchange，提问作者Sylar