在模态上隐藏溢出滚动条

我认为这是一件相当常见的事情,就像我4年前一样。令人惊讶的是,它还没有修复。

1. 使用为模态创建一个外部容器 border-radius 和 overflow: hidden 。在图像上添加边框或其他“阻止边框”的元素的类似技巧
2. 将自定义滚动条样式添加到内部内容容器中。
3. 滚动条不会延伸到模态的边界半径之外,因为 溢出:隐藏 在外部容器上。

以下是修改代码的方法:

HTML:

<div class="h-screen w-screen bg-gray-300">
  <div class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white overflow-hidden rounded-xl">
    <div class="h-fit max-h-[70px] w-[200px] overflow-y-scroll 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>

CSS(尾风CSS加上额外的滚动条样式):

/* Add these styles to your styles.css if you're using a build process with TailwindCSS or directly in your HTML file */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: gray; /* you can choose any color */
    border-radius: 12px;
}

::-webkit-scrollbar-track {
    background-color: #f0f0f0; /* you can choose any color */
}

将需要滚动的内容包装在 div 删除类 max-h-[70px] w-[200px] overflow-y-scroll 来自父项并放置在新项中 div 班

<script src="https://cdn.tailwindcss.com"></script>
<div class="h-screen w-screen bg-gray-300">
  <div class="fixed left-1/2 top-1/2 h-fit  -translate-x-1/2 -translate-y-1/2  overflow-hidden rounded-xl bg-white text-center">
    <div class="max-h-[70px] w-[200px] overflow-y-scroll">
      <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>