Как стилизовать через css полосу прокрутки внутри блока?

Question

[ValeraValera]

Есть блок с абсолютным позиционированием, для него задано overflow=auto,
справа в блоке полоса прокрутки, нужно ее оригинально оформить, какими селекторами ее стилизовать можно ?

Answer 1

[Александр]

Scrollbar стилизовать можно только в webkit браузерах и ie да и то не очень сильно. В ie так не получится скорее всего. В webkit с помощью свойств:
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer.
Пример:

::-webkit-scrollbar { width: 3px; height: 3px;}
::-webkit-scrollbar-button {  background-color: #666; }
::-webkit-scrollbar-track {  background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}

Лучше использовать какой-нибудь js-плагин, типа этого: manos.malihu.gr/jquery-custom-content-scroller

Comments

[Александр Решетняк]

для firefox https://codepen.io/AxeLVaisper/pen/WYyjaq

Answer 2

[Александр Решетняк]

Можно скрыть и показывать только на :hover
https://codepen.io/hiago_silverio/pen/RRdJbz

Answer 3

[lnked]

jscrollpane

Comments

[riot26]

он не может в скролл кликом на колесо :(

[iBird Rose]

riot26: всмысле? такое и дефолтный скролл не умеет, если речь идет о блоке внутри страницы. он работает тока со скроллом самого браузера. сами пишите эвенты для таких действий

[ValeraValera]

не очень-то хочется делать плюс запрос к серверу,ради такой ерунды, с js и так понятно, ищу решение через css

[riot26]

iBird Rose: вот какой скролл я имею ввиду

у меня колесо сломано, но кликать по нему могу, так и прокручиваю все сайты, а jscrollpane не понимает такого скролла