☰

如何更改 Google Chrome 中的滚动条以使其具有不同的颜色？

tag-icon • tag-icon google-chrome scrollbar
如何更改 Google Chrome 中的滚动条以使其具有不同的颜色？

我不喜欢 Google Chrome 的默认滚动条：

在此处输入图片描述

有什么方法可以改变它的颜色吗？

答案1

好消息是，如果你使用 Chrome，你几乎可以在任何地方更改。
转到这里，插件名称就是我们要找的风格化：

https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe
安装它然后创建如下样式：

单击 S 图标（样式） 管理样式

在此处输入图片描述

现在您可以粘贴以下代码

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #840000;
  border: 1px solid #802113;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background: #f90000;
}
::-webkit-scrollbar-thumb:active {
  background: #ff2b2b;
}
::-webkit-scrollbar-track {
  background: #e80000;
  border: 0px none #ffffff;
  border-radius: 53px;
}
::-webkit-scrollbar-track:hover {
  background: #666666;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

当然，如果你不喜欢红色背景，你可以编辑背景部分。
但是，如果你更喜欢视觉解决方案，你可以在这里生成自己的滚动条：
http://mikethedj4.github.io/Webkit-Scrollbar-Generator/
编辑完成后，按保存按钮，刷新页面，现在几乎所有地方都会出现漂亮的滚动条。
笔记：
您可以"!important"为颜色添加属性，这对 css 来说意味着：
“嘿，这很重要，所以我不关心这个元素的任何其他设置”
语法：

background: #666666 !important;

当然，您可以使用简单的颜色名称，如黑色或红色等，但我认为颜色代码更漂亮，因为您可以获得您想要的颜色。
如果您选择这种方法，您可以使用此颜色混合器，例如：
http://www.w3schools.com/tags/ref_colormixer.asp?colorbottom=000000&colortop=FFFFFF
就是这样，现在您可以在 Clam 中工作，而不需要任何丑陋的滚动条。
笔记2：
是的，某些页面存在一些问题，但我认为重要的属性可以解决它。

答案2

我最近一直在做这件事，重新设计滚动条的样式。在这里，看看我的 CSS 源代码，它运行良好，但有一个“错误”或缺少功能，无法让按钮在滚动条位于顶部时发生变化，或者像正常滚动条一样位于底部。

您可以测试代码这里。

源代码如下：

/* SCROLL BAR */
/* URLs to images
             resizer: http://i.imgur.com/hyb90YC.png
   down-arrow-active: http://i.imgur.com/paWZt7f.png
 down-arrow-disabled: http://i.imgur.com/hJVnFr4.png
  down-arrow-enabled: http://i.imgur.com/rGqTWWG.png
   left-arrow-active: http://i.imgur.com/BhwUFGl.png
 left-arrow-disabled: http://i.imgur.com/FocYdIW.png
  left-arrow-enabled: http://i.imgur.com/4wBXM2p.png
  right-arrow-active: http://i.imgur.com/q39FeM6.png
right-arrow-disabled: http://i.imgur.com/ZDzomkI.png
 right-arrow-enabled: http://i.imgur.com/WrfBmNE.png
     up-arrow-active: http://i.imgur.com/78jbDC2.png
   up-arrow-disabled: http://i.imgur.com/ng0Quya.png
    up-arrow-enabled: http://i.imgur.com/nCkVuVg.png
*/
::-webkit-scrollbar {background-color: black;}
/* arrow buttons */
::-webkit-scrollbar-button {background-color: #0d0d0d;background-repeat: no-repeat;background-position: center;}
::-webkit-scrollbar-button:active {background-color: #868686;}
::-webkit-scrollbar-button:hover:not(:active) {background-color: #2c2c2c;}
::-webkit-scrollbar-button:horizontal:increment {background-image: url(http://i.imgur.com/WrfBmNE.png);}
::-webkit-scrollbar-button:horizontal:increment:active {background-image: url(http://i.imgur.com/q39FeM6.png);}
::-webkit-scrollbar-button:horizontal:increment:disabled {background-image: url(http://i.imgur.com/ZDzomkI.png);}
::-webkit-scrollbar-button:horizontal:decrement {background-image: url(http://i.imgur.com/4wBXM2p.png);}
::-webkit-scrollbar-button:horizontal:decrement:active {background-image: url(http://i.imgur.com/BhwUFGl.png);}
::-webkit-scrollbar-button:horizontal:decrement:disabled {background-image: url(http://i.imgur.com/FocYdIW.png);}
::-webkit-scrollbar-button:vertical:increment {background-image: url(http://i.imgur.com/rGqTWWG.png);}
::-webkit-scrollbar-button:vertical:increment:active {background-image: url(http://i.imgur.com/paWZt7f.png);}
::-webkit-scrollbar-button:vertical:increment:disabled {background-image: url(http://i.imgur.com/hJVnFr4.png);}
::-webkit-scrollbar-button:vertical:decrement {background-image: url(http://i.imgur.com/nCkVuVg.png);}
::-webkit-scrollbar-button:vertical:decrement:active {background-image: url(http://i.imgur.com/78jbDC2.png);}
::-webkit-scrollbar-button:vertical:decrement:disabled {background-image: url(http://i.imgur.com/ng0Quya.png);}
/* foreground bar */
::-webkit-scrollbar-thumb {background-color: #3d3d3d;}
::-webkit-scrollbar-thumb:horizontal {border-top: 2px solid #0d0d0d;border-bottom: 2px solid #0d0d0d;}
::-webkit-scrollbar-thumb:vertical {border-left: 2px solid #0d0d0d;border-right: 2px solid #0d0d0d;}
::-webkit-scrollbar-thumb:hover {background-color: #565656;}
/* background bar */
::-webkit-scrollbar-track {background-color: #0d0d0d;}
/* corner, when there is converged scrollbars */
::-webkit-scrollbar-corner {background-color: #232323;}
::-webkit-resizer {border-top: 1px solid #262626; border-left: 1px solid #262626; background-image: url(http://i.imgur.com/hyb90YC.png);}

答案3

这是@Neo 提案的深色版本。记得使用触控笔，因为 Stylish 有一些隐私方面的顾虑。

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}
::-webkit-scrollbar-thumb {
    background: #3e3e3e;
    border: 0px solid transparent;
    border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
    background: #3e3e3e;
}
::-webkit-scrollbar-track:hover {
    background: transparent;
}
::-webkit-scrollbar-thumb:active {
    background: transparent;
}
::-webkit-scrollbar-track:active {
    background: transparent;
}
::-webkit-scrollbar-track {
    background: transparent;
    border: 0px none transparent;
    border-radius: 0px;
}
::-webkit-scrollbar-corner {
    background: transparent;
}

相关内容