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

Question

简单来说,这就是我想要的(使用-webkit-scrollbar在Webkit浏览器上获得):

这就是我在Opera上获得的(Firefox不会将边框半径应用于滚动条,但仍然应用边框):

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

我不需要-webkit-scrollbar的奇特风格,但我希望页面看起来干净,对称......

Answer 1

我一直有同样的问题.这不是最优雅的解决方案,但这就是我所做的......

只需在外盒内放一个较小的div,这样滚动条就不会与外盒重叠.像这样http://codepen.io/DeadWhisky/pen/eKFha

Answer 2

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

谷歌在展示他们的网络应用程序时实现了类似的东西。

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

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