React项目CSS自定义模态框：滚动条外置与页面滚动条隐藏实现

先修正原有代码的两处基础问题：

• 原有CSS存在语法错误：.modal选择器内height: 100%后缺失分号，会导致后续width属性失效
• 类名不匹配：HTML结构里内容容器写的是class="content"，对应CSS定义的类是.modalContent

1. 隐藏页面全局滚动条 #

模态框打开时给<body>标签添加专属类锁定页面滚动，模态框关闭/卸载时移除类名恢复正常滚动即可：

body.modal-open {
  overflow: hidden;
}

React侧通过useEffect处理类名的绑定和清理：

useEffect(() => {
  document.body.classList.add('modal-open')
  return () => document.body.classList.remove('modal-open')
}, [])

2. 实现外置滚动轨道+固定关闭按钮 #

核心思路是把模态框本身设为溢出隐藏，滚动行为完全交给内部内容容器；关闭按钮用绝对定位固定在模态框上层，同时给内容容器右侧预留滚动条空间，实现滚动条外置不遮挡内容的效果。
完整修正后的CSS：

.modal {
  position: absolute;
  left: 50%;
  top: 1rem;
  transform: translate(-50%);
  width: 90%;
  /* 直接用视口高度计算，避免父元素高度未定义导致的高度异常 */
  height: calc(100vh - 2rem);
  background: #212121;
  border-radius: 10px;
  color: white;
  z-index: 10;
  padding: 2rem;
  /* 给内部绝对定位元素提供定位上下文 */
  position: relative;
  /* 模态框本身不产生滚动条 */
  overflow: hidden;
}

/* 固定关闭按钮，不受内容滚动影响 */
.modal .close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 1;
}

.modalContent {
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  /* 右侧预留滚动条轨道空间，实现外置效果，不遮挡内容 */
  padding-right: 12px;
}

/* 可选：自定义滚动条样式适配深色主题 */
.modalContent::-webkit-scrollbar {
  width: 8px;
}
.modalContent::-webkit-scrollbar-track {
  background: #333;
  border-radius: 4px;
}
.modalContent::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 4px;
}

对应修正后的JSX结构：

<div className="modal">
  <span className="close-btn">&times;</span>
  <div className="modalContent">
    {/* 模态框业务内容写在这里 */}
  </div>
</div>

关键逻辑说明 #

• 关闭按钮通过绝对定位脱离内容区文档流，内容滚动时按钮始终固定在模态框右上角保持可见
• 模态框设置overflow: hidden避免外层出现多余滚动条，所有滚动行为收敛到内容容器
• 内容容器的右侧内边距预留了滚动条位置，滚动条不会覆盖在内容上方，达到外置轨道的视觉效果
• 用视口单位计算模态框高度，不需要依赖父元素的高度设置，适配性更强

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