Как поменять ширину скролла при наведение?

Question

[Mark]

Как сделать, чтобы при наведении на скролл его ширина увеличивалась?

Comments

[Rustam Bainazarov]

Mark Sikr, а, точно, забыл. Нативно нельзя.

Ну тогда только JS-плагин какой-нибудь.

[Rustam Bainazarov]

https://kingsora.github.io/OverlayScrollbars/#!overview

[Mark]

как его подключить?

[Сергей Горячев]

Mark Sikr, https://kingsora.github.io/OverlayScrollbars/#!doc...

Answer 1

[iivkis]

Тут написано как с помощью css поменять вид скролла Как стилизовать через css полосу прокрутки внутри блока? .
Что бы изменить его при наведении используй ":hover", например :
*имя тега/класса/id*::-webkit-scrollbar:hover{стили}

Comments

[Mark]

body::-webkit-scrollbar{width: 10px; height: 10px; background: red;}
body::-webkit-scrollbar:hover{width: 20px; height: 20px; background: #FFF;}

Наведение работает, но меняется только фон, не размеры нет

[iivkis]

Mark Sikr, не знал. Значить кастомизируй через js.

Answer 2

[MaksPaverov]

body::-webkit-scrollbar:hover{
width: **px;
}

Answer 3

[JohnnyMnemonik]

Можно ещё добавить transition чтоб ширина плавно менялась

Comments

[Mark]

body::-webkit-scrollbar{width: 10px; height: 10px; background: red;}
body::-webkit-scrollbar:hover{width: 20px; height: 20px; background: #FFF;}

Наведение работает, но меняется только фон, не размеры нет