Css 滚动条样式
相关参考连接
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. 这个功能是非标准的技术,且还没有准备成为标准技术。 不要使用它在生产环境网站中。它可能不是所有用户的环境都生效。在实践和行为表现上,它可能会与将来有比较大的变化与不兼容。
You can use the following pseudo-elements to customize various parts of the scrollbar for webkit browsers:
在webkit浏览器中你可以使用以下的以下的伪类来自定义一系列的滚动条属性
- ::-webkit-scrollbar — the entire scrollbar. 控制整个滚动条
- ::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards). 控制滚动条按钮(向上或者向下按钮)
- ::-webkit-scrollbar-thumb — the draggable scrolling handle. 控制滚动条拖动部分样式
- ::-webkit-scrollbar-track — the track (progress bar) of the scrollbar. 控制滚动条的背景(最底层,会被webkit-scallbar-track-piece覆盖)
- ::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle. 控制滚动条背景,没有被scallbar-thumb部分
- ::-webkit-scrollbar-corner — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet. 控制滚动条之间交互部分(X与Y滚动交互 部分)
- ::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some elements. 不知道