使用 CSS 将边框半径应用于滚动条

Question

简而言之，这就是我想要的（使用 -webkit-scrollbar 在 Webkit 浏览器上获得）：

这就是我在 Opera 上得到的（Firefox 也不将边框半径应用到滚动条，但仍然应用边框）：

有没有一种简单的方法可以使边框在滚动条下不消失？

我不需要 -webkit-scrollbar 的花哨风格，但我希望页面看起来干净且对称……

原文由 Yves 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我一直有同样的问题。这不是最优雅的解决方案，但只需在外框内放置一个较小的 div，这样滚动条就不会与外框重叠。

就像 从这支笔 复制的这段代码：

 .box {
  height: 200px;
  width: 250px;
  border-radius: 10px;
  border: 2px solid #666;
  padding: 6px 0px;
  background: #ccc;
}

.box-content {
  height: 200px;
  width: 250px;
  overflow: auto;
  border-radius: 8px;
}

 <div class="box">
  <div class="box-content">
    <ol>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ol>
  </div>
</div>

原文由 Mark 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

将需要滚动的内容放在 div 和 overflow: auto 中。围绕该内容 div 放一个 div 和你的圆角 overflow: hidden 。

现在您可以看到滚动条，但它的外角是隐藏的，并且不会干扰外部 div 的圆角。

例子：

 // Insert placeholder text
document.querySelector('.inner').innerHTML = 'Text<br>'.repeat(20);

 .outer {
  width: 150pt;
  border: 1px solid red;
  border-radius: 15pt;
  overflow: hidden;
}

.inner {
  height: 200px;
  overflow-y: auto;
}

 <div class="outer">
    <div class="inner">
        <!-- lots of text here -->
    </div>
</div>

原文由 SimpleDesign 发布，翻译遵循 CC BY-SA 3.0 许可协议