CSS3自定义滚动条样式 -webkit-scrollbar

标签: 自定义滚动条
2人阅读 评论(0) 收藏 举报
分类:

滚动条的组成:

::-webkit-scrollbar         滚动条整体部分
 ::-webkit-scrollbar-thumb             滚动条里面的小方块,能上下左右移动(取决于是垂直滚动条还是水平滚动条)
 ::-webkit-scrollbar-track      滚动条的轨道(里面装有thumb)
 ::-webkit-scrollbar-button      滚动条轨道两端的按钮,允许通过点击微调小方块的位置
 ::-webkit-scrollbar-track-piece    内层轨道,滚动条中间部分(除去)
 ::-webkit-scrollbar-corner     边角,及两个滚动条的交汇处
 ::-webkit-resizer       两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
自定义滚动条简单版:
/*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
.scrollbar::-webkit-scrollbar{
width: 16px;
height: 16px;
background-color: #f5f5f5;
}
/*定义滚动条的轨道,内阴影及圆角*/
.scrollbar::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
border-radius: 10px;
background-color: #f5f5f5;
}
/*定义滑块,内阴影及圆角*/
.scrollbar::-webkit-scrollbar-thumb{
/*width: 10px;*/
height: 20px;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}

自定义滚动条效果图:

查看评论

webkit浏览器自定义滚动条样式代码

/*滚动条宽度*/ ::-webkit-scrollbar { width: 8px; } /* 轨道样式 */ ::-webkit-scrollbar-track...
  • ROVAST
  • ROVAST
  • 2015-12-23 16:05:08
  • 1454

CSS3自定义滚动条样式 ::webkit-scrollbar

windows 下默认的滚动条样式巨丑,项目中又有比较多地方会显示滚动条, 故回头翻了一下CSS3, 还真能不用插件实现自定义滚动条的样式,正合我意 代码如下: /*定义滚动条高宽及背景 高宽分别...
  • byc233518
  • byc233518
  • 2017-11-07 16:49:49
  • 1853

自定义浏览器滚动条的样式,打造属于你的滚动条风格——兼容IE和webkit(ff不支持)

前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得 有必要折腾一下。于是在各大浏览器中对比了一下,发现只用Chr...
  • wangpf1992
  • wangpf1992
  • 2016-12-12 11:36:40
  • 2939

CSS自定义滚动条(IE和chrome)

说明 许多浏览器对滚动条的样式是不一样的,比IE下和chrome下就好区别很多,而且它们的代码实现也是不一样的 下面就实现一下IE下和chrome下的滚动条样式 一、chrome(webki...
  • w_linux
  • w_linux
  • 2017-08-30 11:13:59
  • 1388

(转载)CSS3自定义滚动条样式 -webkit-scrollbar

转载来至  韩世雷 程序员专栏 有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了...
  • a1034619934
  • a1034619934
  • 2016-04-26 22:35:44
  • 170

CSS3自定义滚动条样式

有的公司或许会要求做个好看的滚动条,这时候,我们就需要来自定义滚动条,但是IE跟别的是不一样的。所以,在下面的文章中,会有两种不同的方式来自定义滚动条样式。 webkit浏览器css设置滚动条:(下面...
  • zhaohaixin0418
  • zhaohaixin0418
  • 2017-04-19 18:50:39
  • 1937

css3中webkit内核的滚动条样式

项目当中用到的滚动条样式,在别人的基础上调成适合自己的样式。(IE可以调试滚动条样式,firefox目前不能调试)::-webkit-scrollbar { width: 14px; }/* Trac...
  • u011263845
  • u011263845
  • 2015-08-24 11:46:49
  • 1096

去掉div的滚动条的这个有用哦,CSS3滚动条-webkit-scrollbar简介~

最佳实践:仅在Chrome支持 webkit现在支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式。 如果你想跳过介绍,直接看demo的话,请点击de...
  • timtimup123321
  • timtimup123321
  • 2015-11-11 16:17:09
  • 2769

伸缩菜单和自定义滚动条样式

  • 2017年09月25日 17:20
  • 79KB
  • 下载

-webkit-scrollbar 滚动条样式设置

大家有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条很酷炫,很高端,就连chrome32.0之后都抛弃了原始的滚动条,明显好看多了,那么浏览器如何自定义滚动条呢?分割线为敬...
  • qq_33744228
  • qq_33744228
  • 2017-11-26 16:22:22
  • 241
    个人资料
    等级:
    访问量: 0
    积分: 51
    排名: 0
    文章存档