21 / 01 / 21

如何用 CSS 打造实力与颜值并存的网页滚动条

滚动条是网页可用性和可访问性的重要元素之一。你可以通过滚动条来知道页面的长度和当前所在位置。滚动条作为一种工具，应具有功能性：可见，适当大小且具有交互性。我们根据网页性质和大概的访问者属性，可以选择是否使用自定义滚动条，来在减少滚动条占用的屏幕空间和易用性和减少认知负担之间来寻找平衡。

通常使用默认滚动条样式，用户不会或很少有认知负担。

表现各异的原生滚动条

我们先来看看各系统滚动条的差异。

从图中我们可以看到，Mac、Windows、Ubuntu 各系统滚动条的颜色、宽度、圆角等都不太一样，当然这其中有很多原因，比如 Follow 系统的设计语言，Windows 系统的设计特点之一是使用直角，Mac 是圆角。甚至在各操作系统的发展长河中，滚动条也跟随操作系统经历了大变样。

随着 Web 技术的发展，尤其是 CSS 的发展，我们的网页可以做的越来越炫酷，当实现了一个漂亮的网页之后，我们不免有定制滚动条的需求，或为了抹平系统显示差异，或为了更适合自己的网页风格。

自定义滚动条

直到 2009 年 5 月，Webkit 官方博客发表了一篇文章——《Styling Scrollbars》，让自定义滚动条变为可能。

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #4B5563;
}

通过上面几行代码，可以轻松定制一个指定宽度、带圆角、指定背景色的滚动条。

但这就够了吗？让我们看看发生了什么？

当页面内容由少变多到超出一屏时，滚动条的出现会使整个页面向左移动 7 px，页面内容会出现视觉闪动。

如何解决滚动条自身占用空间，在页面出现或消失时发生的闪动问题呢？

操作系统显示滚动条设置

操作系统有一个滚动条设置「滚动时显示」的设置，这可以算是一个增强用户体验的设置，当使用原生滚动条时，可以正常工作，但是当自定义滚动条后，网页的滚动条便不能 Follow 系统设置了，滚动条会一直显示且占用空间。浏览器认为你为滚动条设置了样式，所以相对应的 CSS 应该是期望值，而不是系统设置。（期待将来 CSS 可以有一个 follow 系统设置的选项）

那怎么解决自定义滚动条一直显示且占据一定宽度空间的问题呢？

使用 `overflow-y: overlay` 优化滚动条体验

overflow-y 有一个特殊的值：overlay，它与 overflow-y: auto; 表现基本一致，即当页面超过一屏时，才出现滚动条。但与 auto 不同的是，它将滚动条绘制在内容的顶部，而不占用空间，故而解决了滚动条空间抖动问题。

注意：只支持基于 Webkit 的浏览器（如 Safari）和基于 Blink 的浏览器（如 Chrome）[^MDN]

关于此效果， W3C 在 CSS Overflow Module Level 4 的提案中，提出了另外一个属性 scrollbar-gutter 来更详细的定制滚动条的表现。在浏览器支持此提案之前，可以先用 overflow-y: overlay 来处理。

还有没有其他可优化的细节？

滚动条留白

给滚动条和浏览器边缘设置一点点间距，使滚动条更易识别和操作。操作一下：

::webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #4B5563;
  margin: 2px;
}

什么？没有生效？emmm...曲线救国吧。

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #4B5563;
  border: 2px solid transparent;
  background-clip: padding-box;
}

我们利用添加透明边框，并且设置元素的背景延伸到 padding-box 来实现“Margin”效果。注意一点，需要将滚动条的宽度改为添加上边框后的宽度以达到视觉宽度不变。

其他细节

滚动条视觉窄交互宽。当页面内容比较复杂时，我们可能想减少滚动条在视觉上的空间占用，此时我们可以将滚动条的宽度设置小一点，但当用户 hover 到滚动条时，我们又期望可以提供一个更易操作的宽度，此时可以这样设置：

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar:hover {
  width: 7px;
  height: 7px;
}

活动区域可见。当页面可滚动区域很多时，我们不希望同时出现多个滚动条造成“视觉障碍”。此时可以设置 hover 时再显示滚动条，相信你已经知道如何实现这个效果了。

总之，在滚动条的定制这个场景下，可用性和美观性是两条反向的赛道，我们总要在其中取得一个平衡，根据自己的系统界面元素、性质、用户人群的期望、喜好等等，可以灵活应用。