首页>Firefox 专区>Firefox 扩展、插件、脚本和样式>[样式] Autohiding Translucent Sc...
回复
« 返回列表
fang5566
fang5566
管理员
管理员
  • UID3719
  • 注册日期2005-03-07
  • 最后登录2025-10-30
  • 发帖数18503
  • 经验4859枚
  • 威望5点
  • 贡献值4324点
  • 好评度1118点
写私信
  • 社区居民
  • 最爱沙发
  • 忠实会员
  • 终身成就
阅读：6001回复：11

[样式] Autohiding Translucent Scrollbars（自动隐藏滚动条）

楼主#
更多 发布于：2013-12-07 20:18
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;
}
喜欢3

最新喜欢：

wlqdevilwlqdev... haoeverhaoeve... cmlxcmlx
Firefox More than meets your experience
回复
brucmao
brucmao
火狐狸
火狐狸
  • UID39549
  • 注册日期2013-05-29
  • 最后登录2020-03-25
  • 发帖数101
  • 经验154枚
  • 威望0点
  • 贡献值134点
  • 好评度5点
写私信
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;
}
@brucmao
回复(0) 喜欢(0)
hill
hill
狐狸大王
狐狸大王
  • UID4423
  • 注册日期2005-03-26
  • 最后登录2020-09-09
  • 发帖数344
  • 经验131枚
  • 威望0点
  • 贡献值90点
  • 好评度3点
写私信
  • 社区居民
  • 忠实会员
2楼#
发布于：2013-12-26 14:26
最大的问题是上面的样式都和mousescroll.uc.js不兼容。
回复(0) 喜欢(0)
wlqdevil
wlqdevil
火狐狸
火狐狸
  • UID25006
  • 注册日期2008-06-22
  • 最后登录2021-07-12
  • 发帖数193
  • 经验41枚
  • 威望0点
  • 贡献值18点
  • 好评度-1点
写私信
3楼#
发布于：2013-12-26 09:00
lz发的这个也很赞啊 非常不错 谢谢啦
回复(0) 喜欢(0)
xxp2277
xxp2277
千年狐狸
千年狐狸
  • UID24388
  • 注册日期2008-05-31
  • 最后登录2025-10-25
  • 发帖数1514
  • 经验134枚
  • 威望0点
  • 贡献值46点
  • 好评度8点
写私信
  • 社区居民
4楼#
发布于：2013-12-11 12:29
MalcKear：滚动条样式比较特殊，userChrome 和 userContent都不行。。必须用stylish。。回到原帖
原来如此，我说怎么不行呢。感谢解答！
回复(0) 喜欢(0)
MalcKear
MalcKear
千年狐狸
千年狐狸
  • UID35386
  • 注册日期2011-03-05
  • 最后登录2020-03-02
  • 发帖数1348
  • 经验131枚
  • 威望0点
  • 贡献值16点
  • 好评度10点
写私信
  • 社区居民
  • 忠实会员
5楼#
发布于：2013-12-11 11:52
xxp2277：添加到userChrome.css为啥不能成功呢，似乎楼上所有的样式都不能通过userChrome.css加载？
ps：我没安装Stylish回到原帖
滚动条样式比较特殊，userChrome 和 userContent都不行。。必须用stylish。。
回复(1) 喜欢(0)
xxp2277
xxp2277
千年狐狸
千年狐狸
  • UID24388
  • 注册日期2008-05-31
  • 最后登录2025-10-25
  • 发帖数1514
  • 经验134枚
  • 威望0点
  • 贡献值46点
  • 好评度8点
写私信
  • 社区居民
6楼#
发布于：2013-12-10 22:55
添加到userChrome.css为啥不能成功呢，似乎楼上所有的样式都不能通过userChrome.css加载？
ps：我没安装Stylish
回复(1) 喜欢(0)
alanfly
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2025-04-23
  • 发帖数2783
  • 经验595枚
  • 威望1点
  • 贡献值132点
  • 好评度108点
写私信
  • 社区居民
  • 最爱沙发
  • 忠实会员
7楼#
发布于：2013-12-10 19:04
喜欢默认隐藏的，一般不用鼠标滚动。
回复(0) 喜欢(0)
爱派克
爱派克
小狐狸
小狐狸
  • UID39419
  • 注册日期2013-04-23
  • 最后登录2014-02-08
  • 发帖数11
  • 经验40枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
写私信
  • 社区居民
  • 忠实会员
8楼#
发布于：2013-12-10 16:02
MalcKear：选来选取还是喜欢  FloatingScrollbar
优点：透明、悬浮、不挤压页面
缺点：部分页面可能出现双滚动条 （之前遇到过，现在没有了）

            
:not(hbox) > scrollbar ...回到原帖
谢谢分享，这个兼容性和流畅度不错。
回复(0) 喜欢(0)
MalcKear
MalcKear
千年狐狸
千年狐狸
  • UID35386
  • 注册日期2011-03-05
  • 最后登录2020-03-02
  • 发帖数1348
  • 经验131枚
  • 威望0点
  • 贡献值16点
  • 好评度10点
写私信
  • 社区居民
  • 忠实会员
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;
}
回复(1) 喜欢(2)
文科
文科
千年狐狸
千年狐狸
  • UID39959
  • 注册日期2013-10-17
  • 最后登录2019-07-27
  • 发帖数2069
  • 经验1328枚
  • 威望4点
  • 贡献值340点
  • 好评度256点
写私信
  • 最爱沙发
  • 社区居民
  • 忠实会员
10楼#
发布于：2013-12-07 20:36
回复(0) 喜欢(1)
script
script
小狐狸
小狐狸
  • UID42726
  • 注册日期2013-12-07
  • 最后登录2016-01-16
  • 发帖数5
  • 经验10枚
  • 威望0点
  • 贡献值14点
  • 好评度1点
写私信
11楼#
发布于：2013-12-07 20:33
这个样式不压缩页面，值得推荐。
顺道也发一个，自己用了很久
http://userstyles.org/styles/83431/minimal-floating-scrollbars-for-firefox-windows
回复(0) 喜欢(0)
游客

关于FirefoxMozilla 技术支持谋智中国手机版(Beta)了解 Mozilla

返回顶部