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

Question

简而言之，这就是我想要的（在使用-webkit-scrollbar的Webkit浏览器上获得）： 但是在Opera上，我得到的结果是（Firefox也没有将边框半径应用于滚动条，但仍然应用边框）： 有没有简单的方法使边框不会消失在滚动条下面？

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

- Yves

Answer 1

将需要滚动的内容放入具有 overflow: auto 属性的 div 中。在该内容 div 周围放置一个具有圆角和 overflow: hidden 属性的 div。

现在您可以看到滚动条，但其外部角落被隐藏了，不会干扰外部 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

---

如果你想在高度未知的内容中使用此代码，将内部高度设置为自动将不起作用。在这种情况下，你应该继承父元素的高度以使其正常工作。 - burnaDLX

正如@burnaDLX所说，除非您将内部大小限制为外部大小，例如“height: 100%;”或固定大小，例如“height: 200px”（在示例中<=到外部高度），否则它将无法正常工作。 （如果适应水平滚动，请对宽度执行相同操作）否则，内部大小会随内容增长而增长，并溢出外部容器，该容器的溢出已被隐藏。 - wojtow

对我来说，具有overflow: hidden属性的容器是最佳选择。谢谢！ - Raph

非常感谢您，先生。 - undefined

Answer 2

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

---

通过一点微调，效果非常好。由于带有滚动条的内容很大，我必须确保内容高度小于外部 div 容器的高度。 - neelmeg

外层盒子设置overflow:hidden。 - pmrotule

把overflow:auto;放在单独的div里面的想法真是太棒了！谢谢！ - simkusr

这是一个很棒的解决方案。相当流畅！ - andyengle

Answer 3

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

借助检查元素和复制粘贴的帮助，我编写了下面的代码。

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

- bertdida

---

仅适用于 Chrome，不支持跨浏览器。 - vsync

根据检查元素所运行的浏览器，可能会基于元素的超集css的浏览器实现应用webkit等css样式。超集可能包含其他样式语句，这些语句只能在正确的浏览器上应用。因此，在需要兼容性的每个浏览器上都必须通过检查元素进行反向工程，而没有源代码。 - lal_bosdi

Answer 4

带有边框半径的漂亮水平滚动条。

::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

在SCSS中是相同的。

::-webkit-scrollbar {
  width: 10px;
  height: 10px;

  &-track {
    background: #f1f1f1;
  }

  &-thumb {
    background: #888;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    &:hover {
      background: #555;
    }
  }
}

以下是测试截图：

- Madan Sapkota

---

这太棒了！百分之百有效！我在 ::-webkit-scrollbar-track 中添加了 border-radius: 10px; 以获得所需的圆角滚动条轨道。 - demo7up

Answer 5

这与@Madan Sapkota相同，除了在滚动条和轨道类中的border-radius: 10px;之外，不需要内部div。

::-webkit-scrollbar {
   width: 10px;
   height: 10px;
   border-radius: 10px;
 }

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

- demo7up

Answer 6

圆角轻巧

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

- WasiF

---

这在Chrome中可以工作，但在Firefox中不行，正如问题所要求的那样。 - aleph_one

Answer 7

如果您需要一个精简的滚动条，这里提供 SCSS 代码 。

.custom-scroll {
  overflow: auto;
  scrollbar-color: #c1c1c1 #e6e6e6;
  scrollbar-width: thin;
  border-radius: 5px;
  border-radius: 10px !important;
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px !important;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
  &::-webkit-scrollbar-track {
    background: #e6e6e6;
    border-left: 1px solid transparent;
    border-radius: 10px !important;
  }
  &::-webkit-scrollbar {
    width: 7px;
    scroll-behavior: smooth !important;
  }
}

普通的CSS代码在这里

.custom-scroll {
  overflow: auto;
  scrollbar-color: #c1c1c1 #e6e6e6;
  scrollbar-width: thin;
  border-radius: 5px;
  border-radius: 10px !important;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px !important;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
.custom-scroll::-webkit-scrollbar-track {
  background: #e6e6e6;
  border-left: 1px solid transparent;
  border-radius: 10px !important;
}
.custom-scroll::-webkit-scrollbar {
  width: 7px;
  scroll-behavior: smooth !important;
}

HTML 代码行

<div class="custom-scroll" style="max-height:300px">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae quam vel consectetur enim aliquam unde libero sint, exercitationem voluptate doloribus, quasi veritatis accusantium itaque. In beatae recusandae possimus ea quae.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae quam vel consectetur enim aliquam unde libero sint, exercitationem voluptate doloribus, quasi veritatis accusantium itaque. In beatae recusandae possimus ea quae.</p>
</div>

在浅色和深色主题下，输出将如下所示

- Muhammad Bilawal

Answer 8

如果您能够提供一个演示，那就太好了。不过，您应该尝试将容器的盒模型(box-sizing)更改为border-box(如果尚未这样做)：

box-sizing: border-box;

- alexej_d

---

这个 CSS 属性与问题无关。 - vsync

或者只需使用 border-radius: 0;。 - Simon_Weaver