滚动条

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

滚动条样式的历史简述

  1. 曾经只有 Internet Explorer(旧版本)才能使用诸如 -ms-scrollbar-base-color 之类的东西来实现此功能。这些现在都不存在了。
  2. 然后,基于 WebKit 的浏览器引擎开始使用诸如 ::-webkit-scrollbar 之类的东西。这就是本年鉴条目主要涵盖的内容,因为它在今天的 Safari/Chrome 环境中有效。
  3. 标准最终开始介入,这些样式选项由无前缀的属性(如 scrollbar-colorscrollbar-width)涵盖。

Safari/Chrome 世界的滚动条样式隐藏在 -webkit 供应商前缀后面。

此年鉴条目是一个概述,有关使用自定义滚动条的更完整分解,请阅读 这篇 CSS-Tricks 文章

body::-webkit-scrollbar {
  width: 1em;
}
 
body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
 
body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

-webkit-scrollbar 属性系列包含七个不同的伪元素,这些伪元素共同构成一个完整的滚动条 UI 元素

  1. ::-webkit-scrollbar 用于处理条形本身的背景。它通常被其他元素覆盖
  2. ::-webkit-scrollbar-button 用于处理滚动条上的方向按钮
  3. ::-webkit-scrollbar-track 用于处理进度条“下方”的空白区域
  4. ::-webkit-scrollbar-track-piece 是进度条的最顶层,未被可拖动的滚动元素(拇指)覆盖
  5. ::-webkit-scrollbar-thumb 用于处理可拖动的滚动元素,该元素会根据可滚动元素的大小调整大小
  6. ::-webkit-scrollbar-corner 用于处理可滚动元素的(通常是)底部角,两个滚动条可能在此处相遇
  7. ::-webkit-resizer 用于处理出现在某些元素底部角 scrollbar-corner 上方、可拖动的调整大小句柄

除了这些伪元素之外,还有11个伪选择器类,这些类不是必需的,但为设计人员提供了对滚动条 UI 的各种状态和交互进行样式设置的功能。可以在 这篇 CSS-Tricks 文章 中找到这些伪选择器的完整分解和详细示例。

使用说明

  • 如果没有限定选择器位于各种伪元素之前,则样式将应用于页面上可能出现的任何滚动条。
  • 设置 -webkit-scrollbar 样式是强制您的网页在 Lion 版本之后的 Mac OS 版本上显示水平或垂直滚动条的好方法,在这些版本上,滚动条通常默认隐藏。
  • 由于此属性位于 -webkit 供应商前缀之后,因此已编写了几个 jQuery 插件来“polyfill”或将此功能扩展到其他浏览器。其中一个插件是 jScrollPane

浏览器支持

这些浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
1216411121TP*

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
127127127*13.4-13.7*

使用scrollbar的 CSS 技巧

滚动条的后续步骤