DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!
滚动条样式的历史简述
- 曾经只有 Internet Explorer(旧版本)才能使用诸如
-ms-scrollbar-base-color
之类的东西来实现此功能。这些现在都不存在了。 - 然后,基于 WebKit 的浏览器引擎开始使用诸如
::-webkit-scrollbar
之类的东西。这就是本年鉴条目主要涵盖的内容,因为它在今天的 Safari/Chrome 环境中有效。 - 标准最终开始介入,这些样式选项由无前缀的属性(如
scrollbar-color
和scrollbar-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 元素
::-webkit-scrollbar
用于处理条形本身的背景。它通常被其他元素覆盖::-webkit-scrollbar-button
用于处理滚动条上的方向按钮::-webkit-scrollbar-track
用于处理进度条“下方”的空白区域::-webkit-scrollbar-track-piece
是进度条的最顶层,未被可拖动的滚动元素(拇指)覆盖::-webkit-scrollbar-thumb
用于处理可拖动的滚动元素,该元素会根据可滚动元素的大小调整大小::-webkit-scrollbar-corner
用于处理可滚动元素的(通常是)底部角,两个滚动条可能在此处相遇::-webkit-resizer
用于处理出现在某些元素底部角scrollbar-corner
上方、可拖动的调整大小句柄
除了这些伪元素之外,还有11个伪选择器类,这些类不是必需的,但为设计人员提供了对滚动条 UI 的各种状态和交互进行样式设置的功能。可以在 这篇 CSS-Tricks 文章 中找到这些伪选择器的完整分解和详细示例。
使用说明
- 如果没有限定选择器位于各种伪元素之前,则样式将应用于页面上可能出现的任何滚动条。
- 设置
-webkit-scrollbar
样式是强制您的网页在 Lion 版本之后的 Mac OS 版本上显示水平或垂直滚动条的好方法,在这些版本上,滚动条通常默认隐藏。 - 由于此属性位于
-webkit
供应商前缀之后,因此已编写了几个 jQuery 插件来“polyfill”或将此功能扩展到其他浏览器。其中一个插件是 jScrollPane。
浏览器支持
这些浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
121 | 64 | 11 | 121 | TP* |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127* | 13.4-13.7* |
scrollbar
的 CSS 技巧
使用带有进度条的 CSS 滚动条
WebKit 中的自定义滚动条
动画期间隐藏滚动条
为“显示滚动条”设计
通过强制使用滚动条消除水平居中的跳动
如何创建水平滚动网站
解决滚动条跳动问题的更优雅方法
使用CSS指示页面上的滚动位置
滚动条重排
悬停时显示滚动条
使用CSS将垂直滚动条定位到另一侧
使用自定义滚动条炫耀你的风格
纯CSS水平滚动
滚动就是这样
使用`matrix3d()`创建完美自定义滚动条
滚动条的后续步骤
- 滚动条样式的现状 (CSS-Tricks)
- WebKit 中的自定义滚动条 (CSS-Tricks)
- 如何使用 CSS 自定义浏览器滚动条 (DigitalOcean)
- 两个浏览器走进了滚动条 (Zach Leatherman)
- Safari 冲浪:滚动条样式 (WebKit 博客)
关于此属性和其他属性没有更多信息吗?我的意思是您可以提供一些关于这些属性的示例或插图。
此属性相当古老。它曾经在 IE 5.5 中有效。
它对 Mozilla Firefox 不起作用。
不错的例子……而且这个页面拥有非常非常有用和奇妙的功能。尤其是这个评论区太棒了!
您也很棒。
Firefox 不支持,并且是一个 自 2001 年以来的未解决问题
0.0
好的
我如何才能使用 CSS 自定义浏览器的右侧滚动条?
嗨,Martin,
首先,非常感谢您分享关于使用滚动条的信息,我在我的 HTML 应用程序中为我的文本内容创建了一个滚动条,现在滚动条看起来和工作都很好,但是我办公室审查我 UI 的人说,当文本内容滚动时,文本看起来像是被剪切并在顶部或底部显示。我实际上尝试滚动您示例中的文本,感觉一样。
您对如何消除滚动时显示的文本被剪切成一半有什么建议吗?
谢谢
Sabir
发生这种情况是因为 body 的高度设置为 100%。尝试更改高度。
如果您理解我的意思,请告诉我。
这个网站太棒了
非常感谢您,这对我有很大帮助 :)
谢谢,前端开发人员的好信息。
谢谢老板,这个例子帮助我设计了我的网站。
不错。最好在 Firefox 和 IE 中运行。
在 Firefox 和 IE 中不起作用
asdasda
如何将原始样式应用于 ::-webkit-scrollbar-button?我是否必须为其指定背景图像?
有没有办法在 IE 11 中增加滚动条宽度?
不错,很有帮助
为什么不能为此使用 :hover 样式?Facebook 通过使用脚本创建悬停样式……
我读了这篇文章并自己尝试了一下,但自定义滚动条在 Firefox 中没有渲染,在其他浏览器中看起来很棒,有什么想法吗?
谢谢
很好的例子。也在网站上实现了类似的功能 这里。
在 Mozilla Firefox 中无法使用。
使用 -moz- 而不是 webkit
在火狐浏览器上无法使用……………
Android Chrome 浏览器从 2016 年 12 月开始取消了对它的支持。现在在 Android Chrome 上无法使用,但在桌面版 Chrome 上可以。
您好,我无法更改滚动条滑块的高度。我该如何更改它???
您无法更改滚动滑块的高度。它取决于主体的高度。
你好,
我想在屏幕中间显示滚动条,高度为 80%。
有这种可能吗?
谢谢
如何更改 ::-webkit-scrollbar 的颜色?
当我切换 Overflow: hidden 和 scroll 时,我的页面布局会发生变化。您知道如何使这种开关不会影响我的容器宽度/布局吗?谢谢!很棒的网站,我一直在使用它。
谢谢!一切按预期工作 https://clip2net.com/s/3RHC84j
这是一个你可以使用的插件。
http://grsmto.github.io/simplebar/
Antonio J Figueroa - 你可以使用 CSS
body{overflow-y:overlay;}
,但要注意 overlay 是非标准属性,只有 Chrome 支持。是否有类似的东西也能在下拉菜单中工作……
这篇文章应该更新以包含 Firefox 的样式选项。
Firefox 中的滚动条样式也是可以的(从 v64 版本开始),可以使用
scrollbar-color
和scrollbar-width
。示例可在 https://mdn.org.cn/en-US/docs/Web/CSS/CSS_Scrollbars 找到
我创建了这个小程序来轻松自定义滚动条。
https://github.com/yairEO/fakescroll
谢谢!非常有用的信息,一如既往地在 css-tricks 上!