作者：isadeed译者：前端小智来源：ishadeed有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。自定义滚动条现在越来越流行，所以值得研究一下。为什么需要自定义滚动？浏览器的默认滚动条使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{滚动条颜色：#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{滚动条颜色：#6969dd#e0e0e0;scrollbar-width:thin;}我尝试为添加上面的内容，但它没有按预期工作。现在我们知道新旧语法是如何工作的，让我们开始自定义一些滚动条设计。自定义滚动条设计示例1在深入研究自定义滚动条之前，有必要先讨论一下MacOS中的默认样式。这是它的样子。滚动条轨道左右两侧有边框，背景色为纯色。滚动条拇指是圆形的，左右都有空格。对于Windows，它有点不同。下面是我们根据上面的仿真图自定义滚动条的方法。.section::-webkit-scrollbar{width:16px;}.section::-webkit-scrollbar-track{背景色:#e4e4e4;border-radius:100px;}.section::-webkit-scrollbar-thumb{背景颜色：#d4aa70;border-radius:100px;}为track和thumb添加border-radius是必要的，因为它在::webkit-scrollbar上不起作用。在新的语法中，我们不能调整滚动条的宽度，我们唯一能做的就是改变轨道和拇指的背景颜色。.section{scrollbar-color:#D4AA70#e4e4e4;}示例2对于这个示例，设计有点沉重，因为它包含渐变和阴影。我们可以应用内部阴影和渐变来模拟这种效果。让我们看看如何！.section::-webkit-scrollbar-thumb{background-image:linear-gradient(180deg,#D0368A0%,#708AD499%);盒子阴影：插入2px2px5px0rgba(#fff,0.5);border-radius:100px;}示例地址：https://codepen.io/shadeed/pe...示例3我们还可以给thumb和track添加border，这样可以帮助我们处理一些比较棘手的设计。.section::-webkit-scrollbar-thumb{border-radius:100px;背景：#8070D4；border:6pxsolidrgba(0,0,0,0.2);}基于同样的例子，我们可以重置顶部和底部的边框为零，这样拇指得到一个有趣的效果。注意拇指顶部和底部的那些小元素。示例地址：https://codepen.io/shadeed/pe...可以添加悬停效果吗？我们可以为新旧语法的滚动条拇指添加悬停效果。/*旧语法*/.section::-webkit-scrollbar-thumb:hover{background-color:#5749d2;}/*新语法*/.section{scrollbar-color:#d4aa70#e4e4e4;transition:scrollbar-color0.3sease-out;}.section:hover{scrollbar-color:#5749d2;}Showscrollbarwhenneeded通过向overflow属性添加一个不可见的值来创建可滚动元素。建议使用auto关键字，因为它只会在内容超出其容器时显示滚动条。.section{overflow-y:auto;}辅助功能问题在自定义滚动条设计时，请记住在拇指和轨道之间有一个很好的对比，以便用户很容易注意到。考虑以下自定义滚动条的“坏”示例。拇指的颜色几乎看不出来。这对用户不利，因为如果他们习惯了，这将使他们难以滚动拇指。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://ishadeed.com/article/...每周更新交流文章。微信搜索【大千世界】即可第一时间阅读，回复【福利】还有很多前端视频等着你。本文在GitHub上https://github.com/qq449245884/xiaozhi已收录，欢迎Star。