Цей метод працюватиме тільки в браузерах на драйвері webkit. Тобто, не будуть стилізовані ні Firefox ні IE, бо для них потібен варіант з JS, а це трохи ускладнює процедуру. Може, колись згодом і знайдеться красивий варіант, а поки лишимо так як є, тим більше, що коду додається не більше десятка строк.
/* Стилізація полоси прокрутки вікна. */
[CSS]
.element::-webkit-scrollbar {
width: 10px;
background-color: #2B303B;
}
.element::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #218a8a;
}
.element::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
border-radius: 10px;
background-color: #56626D;
}Для відображення стилю необхідно підключити один class="element" в блокових елементах HTML. Можна користовуватися звічайним <div>, або, як в нашому випадку, вивід кода з прокруткою буде таким:
<!-- Стилізація полоси прокрутки вікна -->
[HTML]
<pre class='element' style='max-height: 300px; overflow: auto;'>
<code>
#element::-webkit-scrollbar {
width: 10px;
background-color: #2B303B;
}
#element::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #218a8a;
}
#element::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
border-radius: 10px;
background-color: #56626D;
}
</code>
</pre>