作者：ishadeed
译者：前端小智
起源：ishadeed
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
自定义滚动条当初越来越风行，很值得钻研一翻。为什么须要自定义滚动？浏览器的默认的滚动条让 UI 在多个操作系统中看起来不统一，应用定义滚动咱们能够对立格调。
我始终对如何在 CSS 中定制滚动条很感兴趣，但始终没有机会这样做。明天，我就记录一下本人的学习过程。
简介
首先须要介绍一下滚动条的组成部分。滚动条蕴含 track 和 thumb，如下图所示：
track是滚动条的根底，其中的 thumb是用户拖动支页面或章节内的滚动。
还有一件重要的事件要记住，滚动条能够程度或垂直地工作，这取决于设计。另外，在一个多语言网站上工作时，这一点也会发生变化，该网站在从左到右（LTR）和从右到左（RTL）两个方向上工作。
自定义滚动条设计
领有一个自定义的滚动条已经是 webkit 的专利，所以 Firefox 和 IE 被排除在游戏之外。咱们有一种新的语法，只在 Firefox 中应用，当它被齐全反对时，将使咱们的工作更容易。咱们先看一下旧的 Webkit 语法，而后再介绍新的语法。
旧的语法
滚动条的宽度
首先，咱们须要定义滚动条的大小。这能够是垂直滚动条的 宽度 ，也能够是程度滚动条的 高度。
.section::-webkit-scrollbar {width: 10px;}有了这一设置，咱们就能够设置滚动条自身的款式。
滚动条 track
这代表了滚动条的根底。咱们能够通过增加 background、shadows、border-radius 和border来对它进行造型。
.section::-webkit-scrollbar-track {background-color: darkgrey;}滚动条 thumb
筹备好了滚动条的根底后，咱们就须要对滚动条的 thumb 进行款式设计。这很重要，因为用户可能会拖动这个 thumb 与滚动条进行交互。
.section::-webkit-scrollbar-thumb {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}至此，咱们曾经介绍了 CSS 中定制滚动条的老办法。让咱们摸索一下新的语法。
新语法
Scrollbar Width
正如它所说的，这定义了滚动条的宽度，有两个值auto 和 thin。不好的中央就是，咱们不能像 webkit 的语法那样定义一个具体的数字。
.section {scrollbar-width: thin;}Scrollbar Color
有了这个属性，咱们能够为滚动条 track和 thumb 定义成对值的色彩。
.section {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}只管这个新语法很简略，但它是有限度的。咱们只能增加色彩。咱们不能增加shadows`、gradients、rounded，或任何相似的货色，咱们被容许定制的只是色彩。
指定自定义滚动条的范畴
要晓得的一个重要问题是，在哪里定制滚动条。你心愿款式是通用的，对网站上的所有滚动条都无效吗？还是你只想让它用于特定的局部？
应用旧的语法，咱们能够编写选择器，而不用将它们附加到元素上，它们将利用于所有可滚动的元素。
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background-color: darkgrey;}
::-webkit-scrollbar-thumb {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}如果你想只实用于一个特定的局部，你须要在选择器之前附加元素。
.section::-webkit-scrollbar {width: 10px;}
.section::-webkit-scrollbar-track {background-color: darkgrey;}
.section::-webkit-scrollbar-thumb {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}对于新的语法，它简直是一样的。我留神到的是，如果你想要一个通用的款式，它应该被利用于 <html> 元素，而不是<body>。
html {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}我尝试为 <body> 增加下面的内容，但它没有像预期的那样工作。
当初咱们晓得了新旧语法的工作原理，接着，咱们开始定制一些滚动条设计。
自定义滚动条设计
例 1
在钻研定制滚动条之前，值得讨论一下 Mac OS 中的默认款式。上面是它的外观。
- 滚动条
track的左右两边都有边框，背景色为纯色。 - 滚动条
thumb是圆形的，左右两边都有空间。
对于 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 上不起作用。
在新的语法中，咱们不能调整滚动条的宽度，惟一能做的的是扭转 track 和 thumb 的背景色彩。
.section {scrollbar-color: #D4AA70 #e4e4e4;}例 2
对于这个例子，设计有点重，因为它蕴含突变和暗影。咱们能够利用外部暗影和突变来模拟这种成果。来看看怎么做!
.section::-webkit-scrollbar-thumb {background-image: linear-gradient(180deg, #D0368A 0%, #708AD4 99%);
box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
border-radius: 100px;
}示例地址：https://codepen.io/shadeed/pe…
例 3
咱们还能够为 thumb 和 track 增加边框，这能够帮忙咱们解决一些辣手的设计。
.section::-webkit-scrollbar-thumb {
border-radius: 100px;
background: #8070D4;
border: 6px solid rgba(0,0,0,0.2);
}基于同样的例子，咱们能够重置顶部和底部边界为零，这样 thumb 取得一个乏味的成果。留神 thumb 顶部和底部的那些小元素。
示例地址：https://codepen.io/shadeed/pe…
能够增加悬停成果吗？
咱们能够为新旧语法的滚动条 thumb 增加悬停成果。
/* 旧语法 */
.section::-webkit-scrollbar-thumb:hover {background-color: #5749d2;}
/* 新语法 */
.section {
scrollbar-color: #d4aa70 #e4e4e4;
transition: scrollbar-color 0.3s ease-out;
}
.section:hover {scrollbar-color: #5749d2;}须要时显示滚动条
创立一个可滚动的元素是能够通过给 overflow 属性增加一个除 visible 以外的值。倡议应用 auto 关键字，因为它只在内容超过其容器时才会显示滚动条。
.section {overflow-y: auto;}可拜访性问题
在定制滚动条设计时，请记住在 thumb 和 track之间要有良好的比照，这样它就容易被用户留神。
考虑一下上面这个自定义滚动条的 “ 坏 “ 例子。
thumb 的色彩简直看不出来。这对用户来说不是坏事，因为如果他们习惯于通过thumb 滚动，这将减少他们的难度。
代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
原文：https://ishadeed.com/article/…
交换
文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。