使用 CSS 将 Border-Radius 应用于滚动条答案

【问题标题】：Apply Border-Radius To Scrollbars with CSS使用 CSS 将 Border-Radius 应用于滚动条
【发布时间】：2013-05-16 14:00:54
【问题描述】：

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

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

有没有简单的方法让滚动条下的边框不消失？

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

【问题讨论】：

标签： html scrollbar css

【解决方案1】：

Google 在展示他们的网络应用时实现了类似的功能。

在检查元素和复制粘贴的帮助下，我得到了下面的代码。

ul::-webkit-scrollbar-thumb {
  background-color: red;
  border: 4px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;  
}

ul::-webkit-scrollbar {
  width: 16px;
}

ul {
  overflow-y: scroll;
  margin: 0;
  padding: 0;
  width: 350px;
  max-height: 300px;
  background-color: #ddd;

  border-radius: 8px;
}

li {
  list-style-type: none;
  padding: 13px;
}

<ul>
  <li>google.com</li>
  <li>facebook.com</li>
  <li>twitter.com</li>
  <li>instagram.com</li>
  <li>linkedin.com</li>
  <li>reddit.com</li>
  <li>whatsapp.com</li>
  <li>tumblr.com</li>
  <li>skype.com</li>
</ul>

我不认为自己是 CSS 专家，所以希望有人能解释一下这些东西是如何工作的。

或者您可以查看 MDN 上的文档：

【讨论】：

这是仅限 chrome 而不是跨浏览器
基于在哪个浏览器上运行了检查元素，webkit 和此类 css 样式可以基于元素的超集 css 的浏览器实现来应用。超集可能包含仅适用于正确浏览器的其他样式语句。因此，如果没有源代码，则必须在需要兼容性的每个浏览器上通过检查元素进行逆向工程。

【解决方案2】：

修身圆角

@-moz-document url-prefix() {
    .scrollbar {
        overflow: auto;
        width: 0.5em !important;
        scroll-behavior: smooth !important;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
        background-color: darkgrey !important;
        outline: 1px solid slategrey !important;
        border-radius: 10px !important;
    }
}

::-webkit-scrollbar {
    width: 0.5em !important;
    scroll-behavior: smooth !important;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
}

::-webkit-scrollbar-thumb {
    background-color: darkgrey !important;
    outline: 1px solid slategrey !important;
    border-radius: 10px !important;
}

<div class="scrollbar" style="height: 600px">
   <h1>Scrollbar is slim with rounded corners</h1>
   <br/>
   <br/>
   <br/>
   <br/>
   <h1>Scrollbar is slim with rounded corners</h1>
   <br/>
   <br/>
   <br/>
   <br/>
   <h1>Scrollbar is slim with rounded corners</h1>
</div>

【讨论】：

这适用于 chrome 但不适用于 Firefox，正如问题所要求的那样。

【解决方案3】：

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

喜欢这个从this pen复制的代码：

.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>

【讨论】：

稍微调整一下效果很好。由于带有滚动条的内容很大，我必须确保内容高度小于外部 div 容器高度。
溢出：隐藏在外盒上
将 overflow:auto; 放在单独的 div 中的想法太棒了！谢谢！

【解决方案4】：

将需要滚动的内容放在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>

【讨论】：

如果您想将其用于高度未知的内容，将内部高度设置为自动将不起作用。在这种情况下，您应该从父元素继承高度以使其正常工作。
正如@burnaDLX 所说，除非您将内部尺寸限制为外部尺寸，例如“高度：100%；”或固定尺寸为“高度：200px”（即

【解决方案5】：

如果你能提供一个小提琴就好了。不过，您应该尝试将容器上的 box-sizing 更改为 border-box（如果尚未完成）：

box-sizing: border-box;

【讨论】：

此 CSS 属性与问题无关
或者只是border-radius: 0;