React JS基于Chakra UI实现Split view分栏视图方案咨询

核心实现逻辑非常直接：从外层容器开始锁定高度边界，切断全局滚动触发条件，仅给右侧内容区开放纵向滚动权限即可，不需要依赖额外的第三方分栏组件。

具体实现步骤 #

• 最外层父容器：使用Chakra UI的Flex组件，设置h="100vh"、overflow="hidden"，直接占满整个浏览器可视区域高度，禁止页面全局滚动，这是实现分栏独立滚动的基础前提。
• 左侧功能菜单窗格：使用Box组件承载菜单内容，设置固定宽度（常用宽度为240px/280px，可根据业务需求调整）、h="full"、flexShrink={0}、overflow="hidden"。其中flexShrink={0}是为了防止右侧内容过宽时挤压左侧菜单宽度，overflow="hidden"保证菜单区域永远不会出现滚动条，高度完全撑满父容器。
• 右侧内容窗格：使用Box组件作为内容承载容器，设置flex="1"自动占满除左侧栏外的所有剩余宽度、h="full"、overflowY="auto"。这个配置会让右侧区域内容高度超出容器时，自动出现独立的纵向滚动条，滚动操作完全不会影响左侧菜单的显示位置。

可直接复用的代码示例 #

import { Flex, Box } from '@chakra-ui/react'
import SideMenu from './SideMenu' // 自定义左侧菜单组件
import RouterContent from './RouterContent' // 右侧动态加载的路由页面内容

export default function AppSplitLayout() {
  return (
    <Flex h="100vh" overflow="hidden">
      {/* 左侧固定菜单区 */}
      <Box 
        w="240px" 
        h="full" 
        flexShrink={0}
        bg="gray.100"
        borderRight="1px solid"
        borderColor="gray.200"
        p={4}
      >
        <SideMenu />
      </Box>

      {/* 右侧独立滚动内容区 */}
      <Box 
        flex="1" 
        h="full" 
        overflowY="auto"
        p={6}
        bg="white"
      >
        <RouterContent />
      </Box>
    </Flex>
  )
}

常见踩坑排查 #

如果配置后滚动效果不符合预期，优先检查两点：

1. 不要给左右栏单独设置h="100vh"，如果布局顶部存在全局导航栏，会导致高度计算溢出，左右栏统一用h="full"继承父容器高度即可
2. 如果右侧内容区嵌套了多层路由容器/布局组件，需要给每一层嵌套的容器都加上h="full"属性，保证高度传递链路不中断，否则overflowY="auto"会失效变成全局滚动

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