Html 使用 CSS 将边框半径应用于滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16676166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apply Border-Radius To Scrollbars with CSS
提问by Yves
To put it simple, this is what i want (obtained on a Webkit Browser using -webkit-scrollbar) :
简单来说，这就是我想要的（使用-webkit-scrollbar在 Webkit 浏览器上获得）：
And this is what I get on Opera (Firefox doesn't apply the border radius to the scrollbar either, but still applies the border) :
这就是我在 Opera 上得到的（Firefox 也不会将边框半径应用于滚动条，但仍会应用边框）：
Is there a simple way to make the border not disappear under the scrollbar ?
有没有一种简单的方法可以使滚动条下的边框不消失？
I dont need the fancy style of -webkit-scrollbarbut i would like the page to look clean and symmetric...
我不需要-webkit-scrollbar的花哨样式，但我希望页面看起来干净且对称...
回答by Mark
I've been having the same issue. It's not the most elegant of solutions but, simply put a smaller div inside your outer box so the scroll bar doesn't overlap the outer box.
我一直有同样的问题。这不是最优雅的解决方案，但是，只需在外框内放置一个较小的 div，这样滚动条就不会与外框重叠。
Like this code copied from 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>回答by SimpleDesign
Put the content that needs to be scrolled in a divwith overflow: auto. Around that content divput a divwith your rounded corners and overflow: hidden.
将需要滚动的内容放在divwith 中overflow: auto。在该内容周围div放一个div带有圆角的 和overflow: hidden。
Now you can see the scroll bar but its outer corners are hidden and
are not disturbing the rounded corners of the outer div.
现在您可以看到滚动条，但它的外角被隐藏了，并且不会干扰外圆角div。
Example:
例子：
// 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>回答by WasiF
slim with rounded corners
修身圆角
@-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>回答by bertdida
Google implemented something like this when showing their web apps.
谷歌在展示他们的网络应用程序时实现了类似的东西。
With the help of the inspect element and copy-paste, I came with the codes below.
在检查元素和复制粘贴的帮助下，我得到了下面的代码。
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>I don't consider myself a CSS expert, so hopefully, someone will explain how these things work.
我不认为自己是 CSS 专家，所以希望有人能解释这些东西是如何工作的。
Or you can check the docs on MDN:
或者你可以查看 MDN 上的文档：
回答by alexej_d
Would be nice if you could supply a fiddle. Nevertheless, you shoud try changing the box-sizing on the container to border-box (if not already done):
如果你能提供一把小提琴就好了。不过，您应该尝试将容器上的 box-sizing 更改为 border-box（如果尚未完成）：
box-sizing: border-box;
