如何解决position:fixed弹窗侧边栏滚动条作用于底层页面问题

你需要分别处理底层页面滚动锁定、侧边栏内部滚动两个逻辑，具体实现如下：

1. 禁用底层页面滚动 #

侧边栏打开时，给页面实际滚动容器（通常是body，如果你自定义了滚动容器就对应替换）添加overflow: hidden样式，拦截底层滚动行为；侧边栏关闭时移除该样式恢复页面滚动。
React项目可以直接在侧边栏组件内通过副作用实现：

// 依赖你控制侧边栏显隐的状态变量，比如isOpen
useEffect(() => {
  // 打开侧边栏时锁滚动
  document.body.classList.add('overflow-hidden')
  // 关闭/组件卸载时恢复滚动
  return () => document.body.classList.remove('overflow-hidden')
}, [isOpen])

2. 开启侧边栏内部滚动 #

调整你现有侧边栏的类名，给内容区加滚动约束，修改后代码如下：

return (
    <div className="fixed z-40 flex left-0 top-0 h-screen w-screen overflow-hidden">
      {/* 全屏灰色遮罩 */}
      <div className="w-full bg-zinc-500 fade-in"></div>

      {/* 右侧侧边栏内容区 */}
      <div className="bg-white w-[600px] h-screen overflow-y-auto">
        <div className="p-8">
          [ MY FORM ]
        </div>
      </div>
    </div>
  )

注意点 #

• 最外层fixed容器要加overflow-hidden，避免容器本身出现多余滚动条
• 右侧内容容器必须设置h-screen占满全屏高度，再加overflow-y-auto，内容超出高度时才会在容器内部产生滚动条
• 你原代码里写的w-600不是TailwindCSS内置类，默认不会生效，自定义600px宽度需要写为任意值类w-[600px]，或者在tailwind配置文件中扩展对应尺寸。

如果你的页面滚动容器不是body，而是AppLayout中包裹<Outlet />的父级div，只需要把锁滚动的逻辑对应到这个容器即可，实现逻辑完全一致。

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