如何更改浏览器窗口的滚动条颜色 [英] How to change the scrollbar color of the browser window

问题描述

我想改变浏览器窗口的滚动条的颜色，我使用下面的代码，但它只工作在 IE8 ，而不是其他像 Chrome 和 Mozilla ..

  html {scrollbar-face-color：＃D6D7D6; 
 scrollbar-shadow-color：#FFFFFF; 
 scrollbar-highlight-color：#EFEFEF; 
 scrollbar-3dlight-color：#FFFFFF; 
 
 scrollbar-track-color：#FFFFFF; 
 scrollbar-arrow-color：＃000000;} 
  

解决方案

您是否考虑过使用 jQuery 插件？例如 jScrollPane 或 Tiny Scrollbar 。

由于此问题陈述：

滚动CSS CSS样式是由微软开发人员发明的奇怪。
它们不是CSS的W3C标准的一部分，因此大多数
浏览器只是忽略它们。

'd推荐那些 jQuery 插件，因为它们与所有浏览器兼容。

如果你不想使用一个插件，似乎截至2013年，70％的浏览器支持一些滚动条样式。例如 webkit 浏览器

的示例代码

  #doc ::  -  webkit-scrollbar {width：9px; height：9px;} 
 #doc ::  -  webkit-scrollbar-button：start：decrement，＃doc ::  -  webkit-scrollbar-button：end： increment {display：block; height：0; background-color：transparent;} 
 #doc ::  -  webkit-scrollbar-track-piece {background-color：#FAFAFA; -webkit-border-radius： -webkit-border-bottom-right-radius：8px; -webkit-border-bottom-left-radius：8px;} 
 #doc ::  -  webkit-scrollbar-thumb：vertical {height：50px; color：＃999; -webkit-border-radius：8px;} 
 #doc ::  -  webkit-scrollbar-thumb：horizo​​ntal {width：50px; background-color：＃999; -webkit-border-radius： 8px;} 
  

每个浏览器都需要不同的语法，我仍然建议使用插件。 >

I want to change the color of the scroll bar of browser window, I used the following code but its working only in IE8 and not in other like Chrome and Mozilla..

html {scrollbar-face-color:#D6D7D6 ;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color:#EFEFEF;
scrollbar-3dlight-color: #FFFFFF;

scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color:  #000000;}

解决方案

Have you considered using a jQuery plugin? Such as jScrollPane or Tiny Scrollbar.

As this question states:

Scrollbar CSS styles are an oddity invented by Microsoft developers. They are not part of the W3C standard for CSS and therefore most browsers just ignore them.

I'd recommend those jQuery plugins, as they are compatible with all browsers.

If you would rather not to use a plugin, it seems that as of 2013, 70% of browsers support some scrollbar styling. Such as this example code for webkit browsers: (ie Chrome)

#doc ::-webkit-scrollbar{width:9px;height:9px;}
#doc ::-webkit-scrollbar-button:start:decrement,#doc ::-webkit-scrollbar-button:end:increment{display:block;height:0;background-color:transparent;}
#doc ::-webkit-scrollbar-track-piece{background-color:#FAFAFA;-webkit-border-radius:0;-webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;}
#doc ::-webkit-scrollbar-thumb:vertical{height:50px;background-color:#999;-webkit-border-radius:8px;}
#doc ::-webkit-scrollbar-thumb:horizontal{width:50px;background-color:#999;-webkit-border-radius:8px;}

Each browser needs a different syntax, I would still suggest using a plugin.

这篇关于如何更改浏览器窗口的滚动条颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！