阅读:5247回复:11
[样式] Autohiding Translucent Scrollbars(自动隐藏滚动条)
http://userstyles.org/styles/95820/autohiding-translucent-scrollbars
之前有人问的CSS样式,自动隐藏滚动条,鼠标移上去以后显示出来,并且为半透明,去除滚动条的上下箭头。图就不给了。如果没安装Stylish,可以添加到userChrome.css里面,代码如下: /* Hides scrollbar */ scrollbar[orient="vertical"]:not(:hover), scrollbar[orient="horizontal"]:not(:hover) { opacity: 0 !important; } /* Hides scrollbar buttons */ scrollbar scrollbarbutton { visibility: collapse !important; } /* Removes whitespace and allows scrollbar to appear */ scrollbar { position: relative !important; -moz-appearance: none !important; background: none !important; z-index: 9999 !important; } /* Appearance of scrollbar thumb */ scrollbar thumb { position: relative !important; -moz-appearance: none !important; background: rgba(110,110,110, .6) !important; border: 0 !important; } /* Color of scrollbar thumb on mouseover */ scrollbar thumb:hover { background: rgba(110,110,110,.8) !important; } /* Color of scrollbar when clicked */ scrollbar thumb:active { background: rgba(110,110,110, 1) !important; } /* Scrollbar sizes */ scrollbar[orient="vertical"] { margin-left: -10px !important; } scrollbar[orient="horizontal"] { margin-top: -10px !important; } |
|
|
1楼#
发布于:2013-12-26 16:10
我也分享一个
ChromeOS滚动条样式脚本 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); scrollbar { -moz-appearance: none !important; -moz-binding: url("chrome://global/content/bindings/scrollbar.xml#scrollbar")!important; cursor: default !important; min-height: 15px !important; min-width: 26px !important; border-width: 0 !important; -moz-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAPCAIAAAAK4lpAAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG4nAABzrwAA+3sAAIFIAABs7gAA5xMAAC5xAAAZsJP3gzMAAAA8SURBVHjaYrx9+zYDLQHjp0+faGoBEwONwdC3gOX///+0tYCRkXE0iIZ7KqJ1JA/9ZEpzHwAAAAD//wMAyr4Rj2OZKrwAAAAASUVORK5CYII=") 0 fill repeat stretch!important; } scrollbar[orient="vertical"] { min-width: 15px !important; min-height: 26px !important; -moz-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAgCAIAAABCTrX+AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG4nAABzrwAA+3sAAIFIAABs7gAA5xMAAC5xAAAZsJP3gzMAAAA1SURBVHja7MohAQAwAALBpwT9exGGibklmMCdOCWxLQkA2l4/aAtoe3t7e/uTfQAAAP//AwDCf9qQy6KNiAAAAABJRU5ErkJggg==") 0 fill repeat stretch!important; } scrollbarbutton { visibility: collapse !important; } thumb { -moz-appearance: none !important; border-width: 4px 0 !important; -moz-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAgCAYAAADNLCKpAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAnElEQVQ4je2VsQ7DIAxEj6pBbEgM/EDGTPz/dzAhRcofeMkCMu5U1CpEHRi64Mkn3ZPP06mUknjvoZTCe0Sk6d4uIgCABwbm+SmICESE8zy7l40xcM7BWnuFj+OA9x5a69vY+74jhHCNnXP+GbWU0vahnyc84QlPeMLDcK0VzHxrZmbUWpv+aox1XRFjRM652xjLsmDbtuZXf2vJF2rDUzRc93OzAAAAAElFTkSuQmCC") 4 0 fill repeat stretch!important; } thumb:hover { -moz-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAgCAYAAADNLCKpAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAnUlEQVQ4je2VMQvDIBSEz0chk8RFN3+DW/7/nDG4uTpldFIwvE4NlRpKaaGLN93Bfby3nQghsDEGQgg8xMxn7nlmBgAQvtDtOez7jhgjUkrdspQS1lporV8ve+9BRJjnGUopKKUaT0TYtu3sN3Ap5e2rOec+/KkGPOABD3jAP4GP47gs11qb3MyNcw7ruiLn3B26aZqwLMvZF39byTtJrkRH6YgyIQAAAABJRU5ErkJggg==") 4 0 fill repeat stretch!important; } thumb:active { -moz-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAgCAYAAADNLCKpAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAApElEQVQ4je2VMQ7DIBAElygSxdHi2q/wE6h4LhJ+hH9AQesHnN3ZlyooKERR5CINW+1KO7rrVqWUZBgGKKXwlIiU3PIiAgC44YLuryHnjGVZsK5r87K1FtM0YRzH98vzPIOZYYwBEYGIKr/vO2KMpV/B27Z9fZWZ2/Cv6nCHO9zhDl+GtdY4z/Nj+TgOaK1LrubGOYcQApi5OTdEBO996au/reQDKl9MY5EIJqsAAAAASUVORK5CYII=") 4 0 fill repeat stretch!important; } thumb[orient="horizontal"] { border-width: 0 4px !important; -moz-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAPCAYAAACFgM0XAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAsUlEQVQ4jcWVMQqEMBBF32xEsdPGA1haev9z2AiCNwgWggGdLSTBLbaM86vf/cfkQWSeZ8Uwsm2bKcDHchygiMV7j/eefd+zDtZ1Tdu2NE3zC7CuK13XUVVVVgCAZVkYx/EGUL0VOI6D2HMnhJC2ChEBQESIPXeeW/YSxlOo6mtP8Nwyv4A5QJJQVbmuC+dc1sHzPFHVJGFyoO97pmkihJAVoCxLhmFIDpj/BcVb5v/LF3BmU7fL3DVUAAAAAElFTkSuQmCC") 0 4 fill repeat stretch!important; } thumb[orient="horizontal"]:hover { -moz-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAPCAYAAACFgM0XAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAq0lEQVQ4jcWVIRKEMAxFX5YKFAKB4gx1vUAPzgU4AhaFQFTV0K7YKVPEypKvvnuZ5M1Etm3LKEZCCKoDfDThAKaU4zjY950QQlPgMAzM88w0TUB1gmVZGMexKbzkPE+89wCYnH8KxBgpvXVqlhERAESE0lunZulLWFaRc37tBDVLfQPqAzwkTCnRdV1T4HVdDwlvB6y1rOtKjLHpAH3f45y7HVD/BeYt8//lC+HZUYZ6ng00AAAAAElFTkSuQmCC") 0 4 fill repeat stretch!important; } thumb[orient="horizontal"]:active { -moz-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAPCAYAAACFgM0XAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAqklEQVQ4jcXVoQ2AMBCF4f8ISRF4NDuwAopJmIhJ2KIbINBYQhNUD3WEBco9Vfe9tHepbNumOEbO83QtUHniALUd9n0nxshxHEXBrusYhoG+74HPEyzLQtM0RXHLfd/M8wxApaqoKimlX3CAlBLm1iLyG/yNuf5DqOqzhea634B/ARFBRAghkHMuDuacCSFg7jsD4ziyrivXdRUt0LYt0zS9M+D+F7htgeUBGzhL1l1Kqz4AAAAASUVORK5CYII=") 0 4 fill repeat stretch!important; } scrollcorner { background-color: #FFFFFF !important; } .scrubber .scale-thumb, .volumeControl .scale-thumb { -moz-border-image: none !important; } |
|
|
2楼#
发布于:2013-12-26 14:26
最大的问题是上面的样式都和mousescroll.uc.js不兼容。
|
|
3楼#
发布于:2013-12-26 09:00
lz发的这个也很赞啊 非常不错 谢谢啦
|
|
4楼#
发布于:2013-12-11 12:29
|
|
5楼#
发布于:2013-12-11 11:52
|
|
|
6楼#
发布于:2013-12-10 22:55
添加到userChrome.css为啥不能成功呢,似乎楼上所有的样式都不能通过userChrome.css加载?
ps:我没安装Stylish |
|
7楼#
发布于:2013-12-10 19:04
喜欢默认隐藏的,一般不用鼠标滚动。
|
|
8楼#
发布于:2013-12-10 16:02
|
|
9楼#
发布于:2013-12-08 13:14
选来选取还是喜欢 FloatingScrollbar
优点:透明、悬浮、不挤压页面 缺点:部分页面可能出现双滚动条 (之前遇到过,现在没有了) 图片:QQ截图20131208131711.png :not(hbox) > scrollbar { -moz-appearance: none!important; position: relative; background-color: transparent; background-image: none; z-index: 2147483647; } :not(hbox) > scrollbar[orient = "vertical"] { -moz-margin-start: -6px; min-width: 6px; } :not(hbox) > scrollbar[orient = "vertical"] thumb { min-height: 20px; } :not(hbox) > scrollbar[orient = "horizontal"] { margin-top: -6px; min-height: 6px; } :not(hbox) > scrollbar[orient = "horizontal"] thumb { min-width: 20px; } :not(hbox) > scrollbar thumb { -moz-appearance: none!important; border-width: 0px!important; background-color: rgba(0, 133, 234, 0.7)!important; border-radius: 10px!important; } :not(hbox) > scrollbar thumb:active, :not(hbox) > scrollbar thumb:hover { background-color: #0085ea!important; } :not(hbox) > scrollbar scrollbarbutton, :not(hbox) > scrollbar gripper { display: none; } |
|
|
10楼#
发布于:2013-12-07 20:36
|
|
11楼#
发布于:2013-12-07 20:33
这个样式不压缩页面,值得推荐。
顺道也发一个,自己用了很久 http://userstyles.org/styles/83431/minimal-floating-scrollbars-for-firefox-windows |
|