使用css chrome＆firefox的滚动样式

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

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

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

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

来源

2016-03-02 Naveen D

所有的浏览器相同的输出是否有任何溶液F或者那个..？ –

你能解释一下吗？ –

我有一个div有一些文本和滚动条（溢出：滚动给出）。我想改变滚动设计，滚动条的颜色。 –

这些伪元素本身。在

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 - 垂直伪类适用于垂直方向的任何滚动条。

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

：增量 - 增量伪类适用于按钮和跟踪条。它指示按钮或曲目片段在使用时是否会增加视图的位置（例如，在垂直滚动条上，在水平滚动条上的右边）。

：start - 开始伪类适用于按钮和轨迹段。它指示对象是否放在拇指之前。

：结束 - 结束伪类适用于按钮和轨迹段。它指示对象是否放在拇指后面。

：double-button - 双按钮伪类适用于按钮和轨迹段。它用于检测按钮是否位于滚动条同一端的一对按钮的一部分。对于轨道部件，它指示轨道部件是否邻接一对按钮。

：单键 - 单按钮伪类应用于按钮和轨迹片段。它用于检测按钮本身是否在滚动条的末尾。对于轨道片段，它指示轨道片段是否邻接单个按钮。

：无按钮 - 适用于跟踪棋子并指示棋子是否跑到滚动条的边缘，即轨道末端没有按钮。

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

：无效窗口 - 适用于所有滚动条，并指示包含滚动条的窗口当前是否处于活动状态。（在最近的夜晚，这个伪类现在也适用于::选择，我们计划扩展它以处理任何内容，并将其作为新的标准伪类提出来。）

这里我发表一个简单的例子：

::-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); 
}

在其中我们会得到这样一个简单的分度，垂直四溢的文字：

您也可以使用jQuery click here

来源

2016-03-03 04:48:54

但这些伪类选择器只能在Chrome中使用，不能在Firefox中使用。 –

回答更新.. –

使用css chrome＆firefox的滚动样式

回答

相关问题