Как изменить полосу прокрутки в Google Chrome на разные цвета?

Question

Мне не нравится полоса прокрутки по умолчанию в Google Chrome:

Есть ли способ, которым я мог бы изменить его цвета?

Answer 1

Хорошей новостью является то, что если вы используете хром, вы можете изменить почти везде.
Перейдите сюда, название плагина - это то, что мы ищем Styleish:

https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe
Установите его и создайте такой стиль:

И теперь вы можете вставить следующий код

::-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;
}

Конечно, если вам не нравится красный фон, вы можете отредактировать раздел backgorund.
Но, если вы предпочитаете визуальное решение, вы можете создать свою собственную полосу прокрутки здесь:
http://mikethedj4.github.io/Webkit-Scrollbar-Generator/
Когда вы закончите редактирование, нажмите кнопку «Сохранить», обновите страницу, и теперь вы получите красивую полосу прокрутки почти везде.
Замечания:
Вы можете добавить "!important" атрибут для цветов, это означает, что CSS:
«Эй, это важно, поэтому мне не нужны другие настройки для этого элемента»
Syntaxis:

background: #666666 !important;

Конечно, вы можете использовать простые названия цветов, такие как черный или красный и т.д., Но я думаю, что цветовой код намного красивее, потому что вы получаете тот же цвет, который хотите.
Если вы выберете этот метод, вы можете использовать этот цветовой микшер, например:
http://www.w3schools.com/tags/ref_colormixer.asp?colorbottom=000000&colortop=FFFFFF
И это все, теперь вы можете работать в моллюсках, без какой-либо шумной полосы прокрутки.
Заметка 2:
Да, у него есть проблемы на некоторых страницах, но я думаю, что важный атрибут может решить эту проблему.

Answer 2

Я недавно делал это, рестайлинг полосы прокрутки. Здесь, посмотрите на мой исходный код в CSS, он прекрасно работает, но есть либо "ошибка", либо ее отсутствие, чтобы заставить кнопки меняться, когда полоса прокрутки вверху или внизу, как нормальный

Вы можете проверить код здесь.

---

Исходный код ниже:

/* SCROLL BAR */
/* urls to images
   down-arrow-active: http://i.imgur.com/i2DE1zX.png
 down-arrow-disabled: http://i.imgur.com/POgcav7.png
  down-arrow-enabled: http://i.imgur.com/Okaqv0F.png
   left-arrow-active: http://i.imgur.com/da8ssLU.png
 left-arrow-disabled: http://i.imgur.com/Ua5b1Gy.png
  left-arrow-enabled: http://i.imgur.com/U6afYKt.png
  right-arrow-active: http://i.imgur.com/6xIxOA5.png
right-arrow-disabled: http://i.imgur.com/nGbTFi3.png
 right-arrow-enabled: http://i.imgur.com/ugyP9JP.png
     up-arrow-active: http://i.imgur.com/cBWkEvO.png
   up-arrow-disabled: http://i.imgur.com/sPnBwlp.png
    up-arrow-enabled: http://i.imgur.com/bP0P61s.png
*/
::-webkit-scrollbar {
    width: auto;
    height: auto;
}
/* arrow buttons */
::-webkit-scrollbar-button {
    width: auto;
    height: auto;
    background: #0d0d0d;
    color: white;
}
::-webkit-scrollbar-button:active {background: #868686;}
::-webkit-scrollbar-button:not(:active):hover {background: #2c2c2c;}
::-webkit-scrollbar-button:disabled:hover {background: #0d0d0d;}
::-webkit-scrollbar-button:horizontal:increment {
    background-image: url(http://i.imgur.com/ugyP9JP.png);
    background-repeat: no-repeat;
    background-position: center;
}
::-webkit-scrollbar-button:horizontal:increment:active {
    background-image: url(http://i.imgur.com/6xIxOA5.png);
    background-repeat: no-repeat;
    background-position: center;
}
::-webkit-scrollbar-button:horizontal:increment:disabled {
    background-image: url(http://i.imgur.com/nGbTFi3.png);
    background-repeat: no-repeat;
    background-position: center;
}
::-webkit-scrollbar-button:horizontal:decrement {
    background-image: url(http://i.imgur.com/U6afYKt.png);
    background-repeat: no-repeat;
    background-position: center;
}
::-webkit-scrollbar-button:horizontal:decrement:active {
    background-image: url(http://i.imgur.com/da8ssLU.png);
    background-repeat: no-repeat;
    background-position: center;
}
::-webkit-scrollbar-button:horizontal:decrement:disabled {
    background-image: url(http://i.imgur.com/Ua5b1Gy.png);
    background-repeat: no-repeat;
    background-position: center;
}
::-webkit-scrollbar-button:vertical:increment {
    background-image: url(http://i.imgur.com/Okaqv0F.png);
    background-repeat: no-repeat;
    background-position: center;
}
::-webkit-scrollbar-button:vertical:increment:active {
    background-image: url(http://i.imgur.com/i2DE1zX.png);
    background-repeat: no-repeat;
    background-position: center;
}
::-webkit-scrollbar-button:vertical:increment:disabled {
    background-image: url(http://i.imgur.com/POgcav7.png);
    background-repeat: no-repeat;
    background-position: center;
}
::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(http://i.imgur.com/bP0P61s.png);
    background-repeat: no-repeat;
    background-position: center;
}
::-webkit-scrollbar-button:vertical:decrement:active {
    background-image: url(http://i.imgur.com/cBWkEvO.png);
    background-repeat: no-repeat;
    background-position: center;
}
::-webkit-scrollbar-button:vertical:decrement:disabled {
    background-image: url(http://i.imgur.com/sPnBwlp.png);
    background-repeat: no-repeat;
    background-position: center;
}
/* foreground bar */
::-webkit-scrollbar-thumb {background: #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: #565656;}
/* background bar */
::-webkit-scrollbar-track {background: #0d0d0d;}
/* corner, when there is converged scrollbars */
::-webkit-scrollbar-corner {background: #232323;}
::-webkit-resizer {background: #222;}