html - 使用 css chrome 和 firefox 的滚动样式

Question

是否可以使用 css(仅) 创建自定义样式(背景颜色、滚动设计等)，这将在两个浏览器(firefox 和 chrome)中可见。

如果是的话。我们怎么能...？

例如:我有一些CSS:请应用一些CSS

div.scroll {
  background-color: #00FFFF;
  width: 100px;
  height: 100px;
  overflow: scroll;
}

Answer 1

这些是伪元素本身。

的实际部分

CSS

    ::-webkit-scrollbar              { /* 1 */ }
    ::-webkit-scrollbar-button       { /* 2 */ }
    ::-webkit-scrollbar-track        { /* 3 */ }
    ::-webkit-scrollbar-track-piece  { /* 4 */ }
    ::-webkit-scrollbar-thumb        { /* 5 */ }
    ::-webkit-scrollbar-corner       { /* 6 */ }
    ::-webkit-resizer                { /* 7 */ }

不同的状态

这些是伪类选择器。它们允许更具体地选择部分，例如当滚动条处于不同状态时。

CSS

:horizontal
:vertical
:decrement
:increment
:start
:end 
:double-button
:single-button
:no-button
:corner-present
:window-inactive

:horizo​​ntal – 水平伪类适用于任何水平方向的滚动条。

:vertical – vertical 伪类适用于任何具有垂直方向的滚动条。

:decrement – decrement 伪类适用于按钮和轨道 block 。它指示按钮或轨道 block 在使用时是否会减少 View 的位置(例如，在垂直滚动条上向上，在水平滚动条上向左)。

:increment – increment 伪类适用于按钮和轨道 block 。它指示按钮或轨道 block 在使用时是否会增加 View 的位置(例如，在垂直滚动条上向下，在水平滚动条上向右)。

:start – 开始伪类适用于按钮和轨道 block 。它指示对象是否放在拇指之前。

:end – end 伪类适用于按钮和轨道 block 。它指示对象是否放在拇指之后。

:double-button – 双按钮伪类适用于按钮和轨道件。它用于检测按钮是否属于滚动条同一端的一对按钮。对于轨道件，它指示轨道件是否邻接一对按钮。

:single-button – 单按钮伪类适用于按钮和轨道件。它用于检测按钮是否单独位于滚动条的末尾。对于轨道件，它指示轨道件是否邻接单例按钮。

:no-button – 适用于轨道 block 并指示轨道 block 是否运行到滚动条的边缘，即轨道的那一端没有按钮。

:corner-present – 适用于所有滚动条 block 并指示是否存在滚动条 Angular 。

:window-inactive – 适用于所有滚动条 block 并指示包含滚动条的窗口当前是否处于事件状态。 (在最近的晚间节目中，这个伪类现在也适用于::selection。我们计划扩展它以处理任何内容，并建议将其作为一个新的标准伪类。)

这里我贴一个简单的例子:

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

其中我们将在一个带有垂直溢出文本的简单 div 上获取它:

您还可以使用 Jquery 在所有浏览器中获得相同的输出 click here