Board logo

标题: 分享个纯色的滚动条 [打印本页]

作者: jym2005    时间: 2011-5-27 23:43     标题: 分享个纯色的滚动条

提示: 作者被禁止或删除 内容自动屏蔽
作者: jfjj007    时间: 2011-6-14 17:42

  1. /*滚动条------------------------------------*/
  2. ::-webkit-scrollbar {width: 8px; height: 3px;}
  3. ::-webkit-scrollbar-track-piece {background-color: #ffffff; -webkit-border-radius: 3px;}
  4. ::-webkit-scrollbar-thumb:vertical {height: 5px; background-color: #666; -webkit-border-radius: 3px;}
  5. ::-webkit-scrollbar-thumb:horizontal {width: 5px; background-color: #666; -webkit-border-radius: 3px;}
复制代码

作者: xvxinan    时间: 2011-6-15 23:54

效果 不错
作者: jgsabc    时间: 2011-6-16 04:03

本帖最后由 jgsabc 于 2011-6-16 21:05 编辑

1# jym2005

chrome原版不能用……………………………………
按照LZ的要求 我修正了 你的代码问题真多 了蓝色 悬停淡蓝色(?) 拖动黑色 顶部和底部补上了淡灰色的 可以用base64美化 不过没什么意义  我觉的配色也有问题。不过尊重不同的看法,自己修正吧
虽然不用TW很多年 支持一下 毕竟2.4曾经经典过
/*一个滚动条:*/
::-webkit-scrollbar{
width:0.5em;
height:0.5em;
background-color:#eee;
}
::-webkit-scrollbar:hover{
background-color:#eee;
}
::-webkit-resizer{
-webkit-border-radius:4px;
background-color:#666;
}
::-webkit-scrollbar-thumb{
min-height:0.5em;
min-width:0.5em;
-webkit-border-radius:4px;
background-color: #3994EF;
}
::-webkit-scrollbar-thumb:hover{
background-color: #A4EEF0;
}
::-webkit-scrollbar-thumb:active{
background-color:#666;
}
作者: jym2005    时间: 2011-6-16 11:41

提示: 作者被禁止或删除 内容自动屏蔽




欢迎光临 世界之窗论坛 (http://bbs.theworld.cn./) Powered by Discuz! 7.2