React项目单独为B页面设置overflow-y:hidden不生效如何解决

问题根因 #

你直接在B.css中写样式只能作用于B组件内部的DOM节点，全局页面滚动条由body/html标签或者占满整个视口的根容器控制，子组件设置overflow-y: hidden只会影响组件自身容器的滚动，无法控制全局滚动条，因此不生效；直接全局设置body的样式会作用于所有页面，自然不符合需求。

解决方案 #

方案1：B组件挂载/卸载时动态修改body样式（最简单通用）

直接在B组件的生命周期钩子中操作body的样式，组件加载时设置隐藏滚动条，组件卸载时恢复默认值即可，不需要修改现有路由结构：

// B.jsx 代码
import { useEffect } from 'react'

const B = () => {
  useEffect(() => {
    // 组件挂载时设置全局滚动条隐藏
    document.body.style.overflowY = 'hidden'
    // 组件卸载时恢复默认滚动行为
    return () => {
      document.body.style.overflowY = 'auto'
    }
  }, [])

  // 其余B组件的业务逻辑保持不变
  return <div className="B-page">B页面内容</div>
}

export default B

方案2：根容器根据路由动态加类（不直接操作DOM的写法）

如果你不想直接操作DOM，可以在App.js中获取当前路由路径，给根容器动态加对应类名，通过全局样式控制滚动：

// App.js 修改后代码
import { useLocation, Switch } from 'react-router-dom'
// 其余原有导入保持不变

function App() {
  const location = useLocation()
  // 其余原有业务逻辑保持不变

  return (
    <div className={`app ${location.pathname.startsWith('/B') ? 'hide-overflow' : ''}`}>
     <Header />
      <Switch>
        <AuthenticatedRoute
          path="/A"
          enabled={user?.isAdmin }
        >
          <A />
        </AuthenticatedRoute>
        <AuthenticatedRoute
          path="/B/"
          enabled={user?.isAdmin }
        >
          <B />
        </AuthenticatedRoute>
      </Switch>
    </div>
  )
}

在全局样式文件中添加对应规则：

/* 如果根容器已经占满视口高度 */
.app.hide-overflow {
  height: 100vh;
  overflow-y: hidden;
}

如果需要精确匹配/B路径，把startsWith('/B')替换为=== '/B'即可。

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