模态框滚动条圆角不匹配：隐藏超出模态框的滚动条部分

问题核心是：即便给滚动容器和滚动条都设置了圆角，滚动条两端还是会超出容器圆角范围——因为容器的overflow-y: scroll不会自动用圆角裁剪滚动条的超出部分。

最简单的解决方式是给模态框套一个外层容器，让外层负责圆角和裁剪，内层专门处理滚动内容：

<div class="h-screen w-screen bg-gray-300">
  <!-- 外层容器：承担圆角和裁剪作用 -->
  <div class="fixed left-1/2 top-1/2 w-[200px] -translate-x-1/2 -translate-y-1/2 rounded-xl overflow-hidden">
    <!-- 内层容器：负责滚动逻辑与内容展示 -->
    <div class="h-fit max-h-[70px] overflow-y-scroll bg-white p-3 text-center">
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
    </div>
  </div>
</div>

改动说明： #

• 把原滚动容器的rounded-xl和overflow-hidden属性移到外层容器
• 外层容器只负责定位、尺寸、圆角和裁剪，内层容器专注滚动和内容
• 外层的overflow-hidden会完全隐藏内层滚动条超出圆角的部分，实现滚动条与容器圆角的完美对齐

如果需要自定义滚动条样式（比如统一滑块/轨道圆角），可以添加Tailwind自定义工具类：

@layer utilities {
  .scrollbar-custom::-webkit-scrollbar {
    width: 8px;
  }
  .scrollbar-custom::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 12px;
  }
  .scrollbar-custom::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 12px;
  }
}

之后给内层滚动容器加上scrollbar-custom类即可。

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