这段代码是从网易邮箱里扣出来的,原来的代码是赋给DIV的,Chrome不允许scrollbar使用透明属性,修改了一下,效果如图
::-webkit-scrollbar { width: 8px; height: 8px; background-color:#fff; } ::-webkit-scrollbar-track { background-color:#fff; border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0) } ::-webkit-scrollbar-track:hover { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4); background-color:#fefefe; } ::-webkit-scrollbar-track:active { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4); background-color:#f0f0f0; } ::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.05); border-radius: 10px; -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1) } ::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,0.4); -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1) } ::-webkit-scrollbar-thumb:active { background: rgba(0,0,0,0.6) } |
仅对Chrome有效,微软的OutLook也使用了类似的代码,当然也是仅仅针对Chrome写的代码,但不知道为什么不让自己的浏览器也支持,IE的自定义滚动条还是5.5那时候的彩色方块..
博主的滚动条比网易更好看,能贴出来么。。。
用CHROME右键审查元素就能看到了.