React中useEffect滚动检测在页面刷新时失效问题求助

我有一个React组件用于展示条目列表，列表会根据条目数量变为可滚动状态。希望仅当列表对应方向可滚动时，才显示左右箭头按钮。

用useEffect钩子检测列表是否可滚动并设置状态变量，功能正常，但页面刷新后，即使列表可滚动，箭头也不再显示。

现有代码 #

状态与逻辑部分：

const [isScrollableLeft, setIsScrollableLeft] = useState(false);
const [isScrollableRight, setIsScrollableRight] = useState(false);
const listRef = useRef();

useEffect(() => {
    const checkScrollable = () => {
        if (listRef.current) {
            const { scrollLeft, scrollWidth, clientWidth } = listRef.current;
            setIsScrollableLeft(scrollLeft > 0);
            setIsScrollableRight(scrollWidth > clientWidth + scrollLeft);
        }
    };

    if (listRef.current) {
        listRef.current.addEventListener("scroll", checkScrollable);
        // Initial check
        checkScrollable();
    }

    // Clean up the event listener when the component is unmounted
    return () => {
        if (listRef.current) {
            listRef.current.removeEventListener("scroll", checkScrollable);
        }
    };
}, []);

JSX部分：

<div className="community-overall-link-container">
    {isScrollableLeft && <div className="link-container-arrow arrow-left-main" onClick={scrollToStart}><img src={leftDirection} alt="←" /></div>}
        <ul ref={listRef} className="community-links-container">
            <li className={`community-links-item ${communityLink === 1 ? 'community-links-item-active' : ''}`} onClick={() => setCommunityLink(1)}>Upcoming Hangout</li>
            <li className={`community-links-item ${communityLink === 2 ? 'community-links-item-active' : ''}`} onClick={() => setCommunityLink(2)}>Discussions</li>
            <li className={`community-links-item ${communityLink === 3 ? 'community-links-item-active' : ''}`} onClick={() => setCommunityLink(3)}>Organizers</li>
        </ul>
    {isScrollableRight && <div className="link-container-arrow arrow-right-main" onClick={scrollToEnd}><img src={rightDirection} alt="→" /></div>}
</div>

问题原因 #

1. 初始检查时机过早：useEffect在组件挂载后异步执行，此时DOM可能还未完成布局（比如样式未完全加载、元素尺寸未计算完成），导致scrollWidth和clientWidth的初始值计算不准确，错误判断列表不可滚动。
2. 缺少窗口尺寸变更监听：页面刷新后如果窗口大小变化，列表的可滚动状态可能改变，但现有逻辑不会重新检查。

解决方案 #

方案1：改用useLayoutEffect确保布局完成后检查

useLayoutEffect会在DOM更新完成后同步执行，能保证获取到准确的元素尺寸：

// 替换原有useEffect为useLayoutEffect
useLayoutEffect(() => {
    const checkScrollable = () => {
        if (listRef.current) {
            const { scrollLeft, scrollWidth, clientWidth } = listRef.current;
            setIsScrollableLeft(scrollLeft > 0);
            setIsScrollableRight(scrollWidth > clientWidth + scrollLeft);
        }
    };

    const handleResize = () => checkScrollable();

    if (listRef.current) {
        listRef.current.addEventListener("scroll", checkScrollable);
        checkScrollable(); // 初始检查
    }

    window.addEventListener("resize", handleResize);

    return () => {
        if (listRef.current) {
            listRef.current.removeEventListener("scroll", checkScrollable);
        }
        window.removeEventListener("resize", handleResize);
    };
}, []);

方案2：用requestAnimationFrame延迟初始检查

如果不想改用useLayoutEffect，可以在初始调用checkScrollable时用requestAnimationFrame，确保在浏览器下一次重绘前获取准确尺寸：

useEffect(() => {
    const checkScrollable = () => {
        if (listRef.current) {
            const { scrollLeft, scrollWidth, clientWidth } = listRef.current;
            setIsScrollableLeft(scrollLeft > 0);
            setIsScrollableRight(scrollWidth > clientWidth + scrollLeft);
        }
    };

    const handleResize = () => checkScrollable();

    if (listRef.current) {
        listRef.current.addEventListener("scroll", checkScrollable);
        // 延迟到下一次重绘时执行初始检查
        requestAnimationFrame(checkScrollable);
    }

    window.addEventListener("resize", handleResize);

    return () => {
        if (listRef.current) {
            listRef.current.removeEventListener("scroll", checkScrollable);
        }
        window.removeEventListener("resize", handleResize);
    };
}, []);

额外优化：动态内容场景

如果列表内容是异步获取的，需要在内容更新后重新检查可滚动状态，此时要把内容相关的状态加入useEffect的依赖数组：

// 假设content是动态获取的列表数据
useEffect(() => {
    const checkScrollable = () => {
        if (listRef.current) {
            const { scrollLeft, scrollWidth, clientWidth } = listRef.current;
            setIsScrollableLeft(scrollLeft > 0);
            setIsScrollableRight(scrollWidth > clientWidth + scrollLeft);
        }
    };

    const handleResize = () => checkScrollable();

    if (listRef.current) {
        listRef.current.addEventListener("scroll", checkScrollable);
        requestAnimationFrame(checkScrollable);
    }

    window.addEventListener("resize", handleResize);

    return () => {
        if (listRef.current) {
            listRef.current.removeEventListener("scroll", checkScrollable);
        }
        window.removeEventListener("resize", handleResize);
    };
}, [content]); // 添加内容依赖，内容更新时重新检查

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