欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>CSS教程

目录导航

CSS 修改 google 浏览器滚动条的方法-webkit-scrollbar

香港高防(10G)机房 添加于 2013-06-25  

CSS教程

在IE中可以自定义滚动条的样式 ,基于webkit的浏览器现在也可以自定义其样式:
::-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 修改 google 浏览器滚动条的方法-webkit-scrollbar-图片1
CSS 修改 google 浏览器滚动条的方法-webkit-scrollbar-图片1

::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
border:1px solid #666666
}
::-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);
}
.test{
width:100px;
height:200px;
overflow:scroll;
border:1px solid #666666;
}
<div class="test">kfalsdfjlasjldf</div>

零度科技原文链接:http://www.ldisp.com/a/css/2013/-webkit-scrollbar.shtml

上一篇:兼容IE8和Chrome浏览器滚动条CSS样式
下一篇:让pre标签的内容自动换行的方法

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

0

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理