YouTube自定义滚动条实现方式咨询：是否采用--webkit新特性或插件

YouTube的自定义滚动条没有使用第三方插件，核心基于WebKit内核的CSS私有伪元素特性实现，目前所有基于Chromium内核的浏览器（Chrome、Edge、Opera等）以及Safari都兼容这套特性。

用到的核心伪元素如下：

• ::-webkit-scrollbar：定义滚动条的整体尺寸，YouTube的竖向滚动条宽度设置为16px，通过透明边框实现了视觉上的窄边效果
• ::-webkit-scrollbar-thumb：定义滚动条可拖拽滑块的样式，默认状态为半透明浅灰色，hover状态切换为更深的灰色，通过background-clip: content-box实现滑块和轨道之间的留白效果
• ::-webkit-scrollbar-track：定义滚动条的轨道样式，YouTube将其设置为完全透明，和页面背景融合，不会干扰内容视觉呈现

你可以参考以下极简示例代码模拟YouTube的滚动条效果：

/* 滚动条整体尺寸 */
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 4px solid transparent;
  background-clip: content-box;
  min-height: 32px;
}

/* 滑块hover状态 */
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: transparent;
}

如果需要适配Firefox浏览器，可以使用scrollbar-width和scrollbar-color两个标准CSS属性做降级兼容，实现类似的自定义滚动条效果。

内容的提问来源于stack exchange，提问作者Miomir Dancevic