React中如何在用户首次访问页面时检测页面是否可滚动并显示滚动条

首先先指出你当前代码存在的几个问题：

1. 组件未挂载时直接通过document.querySelector("#root")获取元素，大概率返回undefined，导致初始scrollHeight状态异常
2. useEffect依赖scrollHeight会触发无限循环——每次调用setScrollHeight更新状态，都会重新触发useEffect再次更新状态
3. 没有处理窗口大小变化的场景，用户调整窗口后高度判断会失效

下面给出几种更优的实现方案，可根据你的实际需求选择：

方案1：纯CSS实现（最简单高效） #

如果只是需要确保首次访问时滚动条始终显示（哪怕内容高度不足），完全不需要JS，直接给根容器或body设置CSS属性：

/* 给body设置，全局生效 */
body {
  overflow-y: scroll;
}

/* 或者仅给#root容器设置 */
#root {
  overflow-y: scroll;
}

设置后不管内容高度是否超出视口，滚动条都会显示（内容不足时为灰色不可用状态），完全满足「首次访问显示滚动条」的需求。

方案2：React组件内动态判断（按需显示） #

如果需要根据内容实际高度动态控制滚动条显示/隐藏，可优化JS逻辑如下：

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

function App() {
  // 用useRef获取根元素，避免重复DOM查询
  const rootRef = useRef(null);
  const [showScrollbar, setShowScrollbar] = useState(false);

  // 封装判断逻辑
  const checkScrollbarNeeded = () => {
    if (!rootRef.current) return;
    const contentHeight = rootRef.current.scrollHeight;
    const viewportHeight = window.innerHeight;
    setShowScrollbar(contentHeight > viewportHeight);
  };

  useEffect(() => {
    // 组件挂载时执行一次判断
    checkScrollbarNeeded();
    // 监听窗口大小变化，实时更新判断
    window.addEventListener('resize', checkScrollbarNeeded);
    // 组件卸载时清理监听事件
    return () => window.removeEventListener('resize', checkScrollbarNeeded);
  }, []); // 空依赖，仅在组件挂载/卸载时执行

  // 根据状态给容器添加样式类
  return (
    <div 
      ref={rootRef} 
      className={showScrollbar ? 'content-scrollable' : ''}
    >
      {/* 你的页面组件内容 */}
    </div>
  );
}

配合对应的CSS：

#root {
  overflow-y: hidden; /* 默认隐藏滚动条 */
}

.content-scrollable {
  overflow-y: auto; /* 内容超出时显示滚动条 */
}

方案3：多页面复用的自定义Hook #

如果需要在每个页面组件首次访问时都执行该判断，可以封装成自定义Hook，方便复用：

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

// 自定义Hook：判断元素内容是否需要显示滚动条
function useScrollbarToggle() {
  const elementRef = useRef(null);
  const [showScrollbar, setShowScrollbar] = useState(false);

  const checkScrollbar = () => {
    if (!elementRef.current) return;
    const scrollHeight = elementRef.current.scrollHeight;
    setShowScrollbar(scrollHeight > window.innerHeight);
  };

  useEffect(() => {
    checkScrollbar();
    window.addEventListener('resize', checkScrollbar);
    return () => window.removeEventListener('resize', checkScrollbar);
  }, []);

  return { elementRef, showScrollbar };
}

// 在页面组件中使用
function UserPage() {
  const { elementRef, showScrollbar } = useScrollbarToggle();
  return (
    <div ref={elementRef} className={showScrollbar ? 'scrollable' : ''}>
      {/* 用户页面内容 */}
    </div>
  );
}

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