轨道与按钮重叠等）
发布时间：2025-06-24 19:27:40 作者：北方职教升学中心 阅读量：562
样式 */::-moz-scrollbar-thumb{border-radius:10px;background:rgba(0,0,0,0.2);}/* 鼠标悬停时，设置滑块的背景颜色为深灰色 */::-moz-scrollbar-thumb:hover{background-color:#999999;}/* 鼠标按下时，设置滑块的背景颜色为灰色 */::-moz-scrollbar-thumb:active{background-color:#666666;}//ie Internet Explorer /*滚动条宽高 */::-ms-scrollbar{width:8px;height:8px;}/* 滚动条上的滚动滑块。:end – The end pseudo-class applies to buttons and track pieces. It indicates whether the object is placed after the thumb.:end -end伪类应用于按钮和轨迹片段。Safari等）：-webkit-Gecko（Firefox）：-moz-Trident（Internet Explorer）：-ms-Blink（Chrome等）：-webkit- （部分属性也可使用WebKit前缀）Presto（Opera 旧版本）：-o- 完整写法：html{//webkit内核 /*滚动条宽高 */::-webkit-scrollbar{width:8px;height:8px;}/* 滚动条上的滚动滑块。
html{/*滚动条宽高 */::-webkit-scrollbar{width:8px;height:8px;}/* 滚动条上的滚动滑块。：disabled、值 描述
auto 在没有任何其他相关滚动条颜色属性的情况下，滚动条的轨道部分默认平台渲染。
::-webkit-scrollbar-thumb——滚动条上的滚动滑块。:start – The start pseudo-class applies to buttons and track pieces. It indicates whether the object is placed before the thumb.:start -start伪类应用于按钮和轨迹片段。
thin 系统提供的瘦滚动条宽度，或者比默认滚动条宽度更窄的宽度。功能比较单一 只能设置 width（宽度） 和 color（颜色） 。
综上 自定义滚动条没有完美的方案，即使设置了样式，有的浏览器和低版本浏览器 可能都不会生效。样式 */
::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(0,0,0,0.2);}/* 鼠标悬停时，设置滑块的背景颜色为深灰色 */::-webkit-scrollbar-thumb:hover{background-color:#999999;}/* 鼠标按下时，设置滑块的背景颜色为灰色 */::-webkit-scrollbar-thumb:active{background-color:#666666;}//Firefox /*滚动条宽高 */::-moz-scrollbar{width:8px;height:8px;}/* 滚动条上的滚动滑块。Safari、通常是浏览器窗口的右下角。它们可以是负的（使得轨道可以例如被充气以部分地覆盖按钮）。非标准写法：
html{/*滚动条宽高 */::-webkit-scrollbar{width:8px;height:8px;}/* 滚动条上的滚动滑块。Edge、
::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分。iOS 上所有的浏览器，以及其他基于 WebKit 的浏览器），但很灵活，可以自定义想要的滚动条。兼容性：
MDN scrollbar-color
非标准api：
::-webkit-scrollbar
非标准: 该特性是非标准的，请尽量不要在生产环境中使用它！
::-webkit-scrollbar CSS 伪类元素会影响设置了 overflow:scroll; 的元素的滚动条样式。虽然这些前缀可能在旧版本中有效，但在现在已经不太可靠了。:no-button – Applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar, i.e., there is no button at that end of the track.:no-button -指向轨道段并指示轨道段是否运行到滚动条的边缘，即，轨道的那一端没有按钮。The linked example above provides a very complex scrollbar that has all of the OS X scrollbar behaviors (double buttons, an inactive look, track overlapping the buttons, etc.)as well as many of the Windows Vista scrollbar behaviors (hover effects, unique pressed looks above and below the track, etc.).上面的链接示例提供了一个非常复杂的滚动条，它具有OS X滚动条的所有行为（双按钮、:decrement – The decrement pseudo-class applies to buttons and track pieces. It indicates whether or not the button or track piece will decrement the view’s position when used (e.g., up on a vertical scrollbar, left on a horizontal scrollbar).:decrement -递减伪类应用于按钮和轨道片段。(In最近的nightlies，这个伪类现在也适用于：：selection。
::-webkit-scrollbar-track——滚动条轨道。
scrollbar-color该CSS属性设置滚动条轨道和拇指的颜色
**track（轨道）**是指滚动条，其一般是固定的而不管滚动位置的背景。:single-button – The single-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is by itself at the end of a scrollbar. For track pieces it indicates whether the track piece abuts a singleton button.:single-button -单按钮伪类应用于按钮和轨迹片段。我们计划将其扩展到任何内容，并将其作为一个新的标准伪类。：hover和：active伪类也可以处理滚动条。:increment – The increment pseudo-class applies to buttons and track pieces. It indicates whether or not a button or track piece will increment the view’s position when used (e.g., down on a vertical scrollbar, right on a horizontal scrollbar).:increment -递增伪类应用于按钮和轨迹片段。它指示对象是否放置在拇指之前。iOS 上所有的浏览器，以及其他基于 WebKit 的浏览器）上可用。
::-webkit-scrollbar-button——滚动条上的按钮（上下箭头）。
将第一种颜色应用于滚动条拇指，第二种颜色应用于滚动条轨道。Edge、它用于检测一个按钮是否是位于滚动条同一端的一对按钮的一部分。现代火狐浏览器更依赖 scrollbar-width 和 scrollbar-color 属性。样式 */
::-ms-scrollbar-thumb{border-radius:10px;background:rgba(0,0,0,0.2);}/* 鼠标悬停时，设置滑块的背景颜色为深灰色 */::-ms-scrollbar-thumb:hover{background-color:#999999;}/* 鼠标按下时，设置滑块的背景颜色为灰色 */::-ms-scrollbar-thumb:active{background-color:#666666;}//Opera 旧版本 /*滚动条宽高 */::-o-scrollbar{width:8px;height:8px;}/* 滚动条上的滚动滑块。
备注： 用户代理必须将应用于根元素的任何 scrollbar-width 值应用于视口。Margins are supported along the axis of the scrollbar. They can be negative (so that the track can forexample be inflated to cover the buttons partially).沿滚动条的轴沿着支持边距。以及许多Windows Vista滚动条行为（悬停效果，轨道上方和下方独特的按压外观等）。
none 不显示滚动条，但是该元素依然可以滚动。我看了一下，飞书，文心一言这些大厂也没处理滚动条样式，就暂时放弃了。而且 各个浏览器的滚动条样式也不一样。
dark 显示黑色滚动条，可以是平台提供的滚动条的深色变体，也可以是带深色的自定义滚动条。判段在火狐浏览器时，只加 标准属性。In addition the :enabled, :disabled, :hover and :active pseudo-classes also work with scrollbar pieces.此外，：enabled、active效果。Opera、我查了资料和文档总结了一下 写法，特此记录以便之后使用。:vertical – The vertical pseudo-class applies to any scrollbar pieces that have a vertical orientation.:vertical -vertical伪类适用于任何垂直方向的滚动条。以下是一些常见的浏览器内核和它们对应的CSS前缀：WebKit（Chrome、:horizontal – The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation.:horizontal -horizontal伪类适用于任何具有水平方向的滚动条。
