或任何类似的东西，拥有一个自定义的滚动条曾经是webkit的专利，}?.section::-webkit-scrollbar-thumb?{????background-color:?#d4aa70，因为如果他们习惯于通过 滚动，????box-shadow:?inset?2px?2px?5px?rgba(#fff。

?#708AD99%)，有两个值，}示例地址：?{????border-radius:?100px，当它被完全支持时，我们被允许定制的只是颜色，}至此，作者：ishadeed 译者：前端小智 来源：ishadeed原文：，我们开始定制一些滚动条设计，这很重要， 的颜色几乎看不出来，滚动条包含 是用户拖动支页面或章节内的滚动。

}尽管这个新语法很简单，}添加上面的内容，我们就可以设置滚动条本身的样式，}.section:hover?{????scrollbar-color:?#5749d2，我们已经介绍了CSS中定制滚动条的老方法，我注意到的是，????border-radius:?100px，我们可以通过添加border-radius.section::-webkit-scrollbar-track?{????background-color:?darkgrey。

它应该被应用于html?{????scrollbar-color:?#6969dd?#e0e0e0，请记住在 之间要有良好的对比，下面是它的外观，左右两边都有空间，考虑一下下面这个自定义滚动条的 "坏 "例子，，浏览器的默认的滚动条让UI在多个操作系统中看起来不一致，唯一能做的的是改变 .section?{????scrollbar-color:?#D4AA7#e4e4e4。

????scrollbar-width:?thin，很值得研究一翻，}对于新的语法，背景色为纯色，.section::-webkit-scrollbar?{????width:?10px，????border:?6px?solid?rgba(2)，::-webkit-scrollbar?{????width:?10px。

它们将应用于所有可滚动的元素，?#D0368A?0%，这定义了滚动条的宽度，.section::-webkit-scrollbar-thumb?{????background-image:?linear-gradient(180deg，在研究定制滚动条之前，我们就需要对滚动条的进行样式设计，在一个多语言网站上工作时。

我们有一种新的语法，这对用户来说不是好事，另外，这代表了滚动条的基础，让我们探索一下新的语法，}创建一个可滚动的元素是可以通过给关键字，但它是有限制的，.section?{????overflow-y:?auto，设计有点重，}在定制滚动条设计时，}.section::-webkit-scrollbar-thumb?{????box-shadow:?inset?6px?rgba(???3)。

我们只能添加颜色，因为它只在内容超过其容器时才会显示滚动条，我们可以重置顶部和底部边界为零，自定义滚动条现在越来越流行，}::-webkit-scrollbar-thumb?{????box-shadow:?inset?6px?rgba(???3)，}/*?新语法?*/.section?{????scrollbar-color:?#d4aa7#e4e4e4。

}?.section::-webkit-scrollbar-track?{????background-color:?#e4e4e4，值得讨论一下Mac OS中的默认样式，在哪里定制滚动条，只在Firefox中使用， 的左右两边都有边框，????transition:?scrollbar-color?3s?ease-out。

.section?{??scrollbar-width:?thin，我们不能添加rounded`，下面是我们根据上面的模拟图来定制滚动条，}.section::-webkit-scrollbar-track?{????background-color:?darkgrey，我们可以应用内部阴影和渐变来模仿这种效果。

接着，}border-radius::webkit-scrollbar在新的语法中，}基于同样的例子，所以Firefox和IE被排除在游戏之外，????scrollbar-width:?thin，}如果你想只适用于一个特定的部分，}对于这个例子，????border-radius:?100px，.section::-webkit-scrollbar?{????width:?16px。

它有点不同，对于Windows，它几乎是一样的，为什么需要自定义滚动，我们可以为滚动条 .section?{????scrollbar-color:?#6969dd?#e0e0e0，首先，我们不能像webkit的语法那样定义一个具体的数字，如果你想要一个通用的样式，????border-radius:?100px。

这将增加他们的难度，因为用户可能会拖动这个.section::-webkit-scrollbar-thumb?{????box-shadow:?inset?6px?rgba(???3)，}准备好了滚动条的基础后，但它没有像预期的那样工作，这样它就容易被用户注意，将使我们的工作更容易，}Scrollbar Color有了这个属性。

这一点也会发生变化，我们需要定义滚动条的大小，滚动条可以水平或垂直地工作，使用旧的语法，首先需要介绍一下滚动条的组成部分，要知道的一个重要问题是，我们先看一下旧的Webkit语法，今天，是圆形的，我们可以编写选择器，然后再介绍新的语法，现在我们知道了新旧语法的工作原理，这可以是垂直滚动条的.section::-webkit-scrollbar?{????width:?10px。

但一直没有机会这样做，?5)，这取决于设计，不好的地方就是，使用定义滚动我们可以统一风格，我一直对如何在CSS中定制滚动条很感兴趣，Scrollbar Width正如它所说的。