0元购京东自营斐讯K2路由器返399元活动
置顶

如何设置 WebKit 浏览器滚动条属性

作者:     目录: 小代码     发表: 2012年02月06日

为了增加页面的视觉效果,基于WebKit的浏览器可以通过定义伪类 ::-webkit-scrollbar 属性来设置滚动条的属性(大小,颜色,位置,背景等)。注:请使用Chrome浏览器来体验滚动条效果,不支持IE Opera Firefox。

设置 WebKit 浏览器滚动条属性的7条 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 */ }

如何设置 WebKit 浏览器滚动条属性

11种滚动条类型

:horizontal(水平方向)和:vertical(垂直方向)使用的最频繁,其他很少使用。

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

滚动条设置示例:

如何设置 WebKit 浏览器滚动条属性

CSS代码:

/* For the “inset” look only */
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
padding: 30px;
overflow-y: scroll;
overflow-x: hidden;
}

/* Let’s get this party started */
::-webkit-scrollbar {
width: 12px;
}

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

/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-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);
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-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 个评论

  1. 北京SEO says:

    博主您好 请问你的博客主题用的是那一款主题.谢谢

刘学政博客进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注