Question

是否可以使用 css（仅限）创建自定义样式（背景颜色，滚动设计等），这将在两个浏览器中都可见（firefox＆amp; chrome）。

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

例如：我有一些CSS：请申请一些CSS

Flatten

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

：水平 - 水平伪类适用于任何具有水平方向的滚动条。

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

：递减 - 递减伪类适用于按钮和曲目片段。它指示按钮或轨道件在使用时是否会减小视图的位置（例如，在垂直滚动条上，在水平滚动条上）。

：increment - 增量伪类适用于按钮和轨道片段。它指示按钮或轨道件在使用时是否会增加视图的位置（例如，向下在垂直滚动条上，在水平滚动条上）。

：start - start伪类适用于按钮和曲目片段。它指示对象是否放在拇指之前。

：结束 - 结束伪类适用于按钮和曲目片段。它表示对象是否放在拇指之后。

：双按钮 - 双按钮伪类适用于按钮和曲目片段。它用于检测按钮是否是滚动条同一端的一对按钮的一部分。对于曲目片，它表示曲目片是否与一对按钮相邻。

：单按钮 - 单按钮伪类适用于按钮和曲目片段。它用于检测按钮是否单独位于滚动条的末尾。对于曲目片段，它指示曲目片段是否与单个按钮相邻。

：无按钮 - 适用于曲目片段并指示曲目片段是否运行到滚动条的边缘，即曲目的那一端没有按钮。

：corner-present - 适用于所有滚动条片段并指示是否存在滚动条角落。

：窗口无效 - 适用于所有滚动条片段，并指示包含滚动条的窗口当前是否处于活动状态。（在最近的夜晚，这个伪类现在也适用于:: 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

在所有浏览器中获得相同的输出

滚动样式使用css chrome＆amp;火狐

1 个答案: