css设置滚动条的样式

1. webkit下面的CSS设置滚动条

主要有下面7个属性

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式

上面是滚动条的主要几个设置属性，还有更详尽的CSS属性：

:horizontal 水平方向的滚动条
:vertical 垂直方向的滚动条
:decrement 应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。)
:increment decrement类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。)
:start 伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
:end 类似于start伪类，标识对象是否放到滑块的后面。
:double-button 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。
:single-button 类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。
:no-button 用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。
:corner-present 用于所有滚动条轨道，指示滚动条圆角是否显示。
:window-inactive 用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)

例：

/* 设置滚动条的样式 */
::-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;
background:rgba(0,0,0,0.1);
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {background:rgba(255,0,0,0.4);
}

2. IE下面的CSS设置滚动条

IE下面就比较简单那了，自定义的项目比较少，全是颜色。

scrollbar-arrow-color: color; 三角箭头的颜色
scrollbar-face-color: color; 立体滚动条的颜色（包括箭头部分的背景色）
scrollbar-3dlight-color: color; 立体滚动条亮边的颜色
scrollbar-highlight-color: color; 滚动条的高亮颜色（左阴影？）
scrollbar-shadow-color: color; 立体滚动条阴影的颜色
scrollbar-darkshadow-color: color; 立体滚动条外阴影的颜色
scrollbar-track-color: color; 立体滚动条背景颜色
scrollbar-base-color:color; 滚动条的基色

3. 修改火狐Firefox

修改火狐滚动条样式的css属性只有 scrollbar-color 和 scrollbar-width 。

scrollbar-color: auto; /* 使用浏览器默认的滚动条样式 */scrollbar-color: dark; /* 使用浏览器默认的深色或者黑色滚动效果 */scrollbar-color: light; /* 使用浏览器默认的浅色滚动效果 */scrollbar-color: red #00f; /* 第一个颜色为滚动条的颜色， 第二个颜色为滚动条轨道的颜色 */

scrollbar-width: auto; /* 使用浏览器默认的滚动宽度 */scrollbar-width: thin; /* 设置比默认滚动条宽度更窄的宽度 */scrollbar-width: none; /* 隐藏滚动条，但是元素还是可以滚动 */scrollbar-width: 66px; /* 直接设置滚动条的宽度，比如 60px 3vh 4wh 5rem 6rm 等长度 */

css设置滚动条的样式相关推荐

CSS设置滚动条样式
今天在写一个项目的时候遇到了,这样一个小难点要设置一个类似于页面的滚动条,查阅了相关文档之后,我会了一.我们可以使用overflow属性设置是否出现滚动条overflow:scroll /* x ...
css省略号，css书写顺序，实现滑动，设置滚动条的样式，设置文字的渐变色
css笔记记录!!! 1.oninput事件 // 当用户向 <input> 中尝试输入时执行 JavaScript: // 是输入框仅限于汉字输入(无延迟) 例如:oninput=&qu ...
清除webkit浏览器css设置滚动条
主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollb ...
java设置滚动条的样式_[Java教程]美化浏览器滚动条效果
[Java教程]美化浏览器滚动条效果 0 2016-10-31 16:02:28 任务需求:由于不同浏览器对滚动条的样式解析存在差异,为统一样式风格,增加整体美观程度,需要实现自定义滚动条. 第一种方 ...
html 设置滚动条颜色,CSS设置滚动条颜色步骤
本文向大家描述一下如何使用CSS设置滚动条颜色,如果你在浏览网页的时候看到网页滚动条颜色不是系统默认的样式,而是漂亮的红色或其它颜色样式,那么这就是使用CSS代码设置的效果. CSS设置滚动条颜色我 ...
怎样用css设置横向的滚动条,如何用CSS设置滚动条颜色？
我们在浏览网页的时候有时可以看到网页滚动条颜色不是系统默认的样式,而是漂亮的红色或其它颜色样式,其实这就是在网页代码之间加入代码来实现的,具体是哪些代码呢? 页面滚动条代码及其解释如下: scroll ...
javafx css样式_使用CSS设置JavaFX饼图样式
javafx css样式渲染图表时, JavaFX默认提供某些颜色. 但是,在某些情况下,您想自定义这些颜色. 在此博客文章中,我将使用一个示例来更改JavaFX饼图的颜色,该示例打算在今天下午在2 ...
使用CSS设置JavaFX饼图样式
渲染图表时, JavaFX默认提供某些颜色. 但是,在某些情况下,您想自定义这些颜色. 在此博客文章中,我将使用一个示例来更改JavaFX饼图的颜色,该示例打算在今天下午在RMOUG Training ...
【css设置滚动条粗细】
List item css设置滚动条粗细 *::-webkit-scrollbar {width: 12px;height: 12px; } *::-webkit-scrollbar-button { ...

css设置滚动条的样式

1. webkit下面的CSS设置滚动条

2. IE下面的CSS设置滚动条

3. 修改火狐Firefox

css设置滚动条的样式相关推荐

最新文章

热门文章