自定义滚动条现在越来越流行，值得研究。为什么需要自定义滚动？浏览器的默认滚动条使UI在多个操作系统中看起来不一致。使用定义的滚动我们可以统一样式。我一直对如何在CSS中自定义滚动条感兴趣，但一直没有机会这样做。今天记录一下自己的学习过程。简介首先，我们需要介绍一下滚动条的组成部分。滚动条包括track和thumb，如下图：track是滚动条的基础，thumb由用户拖动在页面或章节内滚动。需要记住的一件更重要的事情是滚动条可以水平或垂直工作，具体取决于设计。此外，在从左到右(LTR)和从右到左(RTL)方向工作的多语言网站上工作时，这种情况也会发生变化。自定义滚动条设计自定义滚动条曾经是webkit的专利，因此Firefox和IE被排除在外。我们有一个新的语法，只在Firefox中使用，当它得到完全支持时，这将使我们的工作更容易。在介绍新语法之前，让我们先看看旧的Webkit语法。旧语法滚动条宽度首先，我们需要定义滚动条的大小。这可以是垂直滚动条的宽度或水平滚动条的高度。.section::-webkit-scrollbar{width:10px;}有了这个集合，我们就可以为滚动条本身设置样式。滚动条轨迹这表示滚动条的基础。我们可以通过添加背景、阴影、边框半径和边框来设置样式。.section::-webkit-scrollbar-track{background-color:darkgrey;}scrollbarthumb滚动条的基础准备就绪后，我们需要设置滚动条拇指的样式。这很重要，因为用户可以拖动拇指来与滚动条交互。.section::-webkit-scrollbar-thumb{box-shadow:inset006pxrgba(0,0,0,0.3);}至此，我们介绍了CSS自定义滚动条的老办法。让我们探索新的语法。新语法ScrollbarWidth确实如其所说，这个定义了滚动条的宽度，有两个值auto和thin。不好的是我们不能像webkit的语法那样定义一个具体的数字。.section{scrollbar-width:thin;}ScrollbarColor通过这个属性，我们可以为滚动条track和thumb定义成对值的颜色。.section{scrollbar-color:#6969dd#e0e0e0;scrollbar-width:thin;}虽然这个新语法很简单，但它有局限性。我们只能添加颜色。我们不能添加阴影``、渐变、圆角`或类似的东西，我们只能自定义颜色。关于指定自定义滚动条范围的一个重要问题是在何处自定义滚动条。您是否希望样式通用并应用于网站上的所有滚动条？或者您只想将其用于特定部分？使用旧语法，我们可以编写选择器而不必将它们附加到元素，它们将应用于所有可滚动元素。::-webkit-scrollbar{width:10px;}::-webkit-scrollbar-track{background-color:darkgrey;}::-webkit-scrollbar-thumb{box-shadow:inset006pxrgba(0,0,0,0.3);}如果只想应用到特定部分，则需要在选择器之前附加该元素。.section::-webkit-scrollbar{width:10px;}.section::-webkit-scrollbar-track{background-color:darkgrey;}.section::-webkit-scrollbar-thumb{box-shadow:inset006pxrgba(0,0,0,0.3);}对于新的语法，它几乎是一样的。我注意到的是，如果您想要通用样式，则应该将其应用于元素。html{scrollbar-color:#6969dd#e0e0e0;scrollbar-width:thin;}我尝试添加上面的for但它没有按预期工作。现在我们知道新旧语法是如何工作的，让我们开始自定义一些滚动条设计。自定义滚动条设计示例1在深入研究自定义滚动条之前，有必要先讨论一下MacOS中的默认样式。这是它的样子。滚动条轨道左右两侧有边框，背景色为纯色。滚动条拇指是圆形的，左右都有空格。对于Windows，它有点不同。下面是我们根据上面的仿真图自定义滚动条的方法。.section::-webkit-scrollbar{width:16px;}.section::-webkit-scrollbar-track{background-color:#e4e4e4;border-radius:100px;}.section::-webkit-scrollbar-thumb{background-color:#d4aa70;border-radius:100px;}为track和thumb添加border-radius是必要的，因为它不适用于::webkit-scrollbar。在新的语法中，我们不能调整滚动条的宽度，我们唯一能做的就是改变轨道和拇指的背景颜色。.section{scrollbar-color:#D4AA70#e4e4e4;}Example2对于这个例子，设计有点沉重，因为它包含渐变和阴影。我们可以应用内部阴影和渐变来模拟这种效果。让我们看看如何！.section::-webkit-scrollbar-thumb{background-image:linear-gradient(180deg,#D0368A0%,#708AD499%);box-shadow:inset2px2px5px0rgba(#fff,0.5);border-radient:100px;}示例地址：https://codepen.io/shadeed/pen/VwpOReGExample3我们还可以给thumb和track添加border，这样可以帮助我们处理一些比较棘手的设计。.section::-webkit-scrollbar-thumb{border-radius:100px;background:#8070D4;border:6pxsolidrgba(0,0,0,0.2);}基于同样的例子，我们可以重新设置上下边框到零，所以拇指得到一个有趣的效果。注意拇指顶部和底部的那些小元素。示例地址：https://codepen.io/shadeed/pen/qBrGvOx可以添加悬停效果吗？我们可以给新旧语法的滚动条thumb添加悬停效果。/*旧语法*/.section::-webkit-scrollbar-thumb:hover{background-color:#5749d2;}/*新语法*/.section{scrollbar-color:#d4aa70#e4e4e4;transition:scrollbar-color0.3sease-out;}.section:hover{scrollbar-color:#5749d2;}在需要时显示滚动条创建可滚动元素是通过向溢出属性添加一个不可见的值来完成的。建议使用auto关键字，因为它只会在内容超出其容器时显示滚动条。．考虑以下自定义滚动条的“坏”示例。拇指的颜色几乎看不出来。这对用户不利，因为如果他们习惯了，这将使他们难以滚动拇指。作者：isadeed译者：前端小智来源：isadeed原文：https://ishadeed.com/article/custom-scrollbars-css/
