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

Question

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

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

是否有一种简单的方法可以让滚边条下的边框不会消失？

我不需要 -webkit-scrollbar 的奇特风格，但我希望页面看起来干净整洁......

Answer 1

我一直有同样的问题。它不是最优雅的解决方案，但只需在外盒中放一个较小的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>

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>

Answer 3

Google在显示其网络应用程序时实施了类似的操作。

借助inspect元素和复制粘贴，我获得了以下代码。

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上的文档：

• ::-webkit-scrollbar
• background-clip

Answer 4

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

box-sizing: border-box;

Answer 5

修身圆角

::-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 style="height: 500px">
</div>