Как настроить scrollbar на сайте?

Question

[Владимир]

Вот код:

::-webkit-scrollbar-button { 
background-image:url(''); 
background-repeat:no-repeat; 
width:6px; 
height:0px 
} 

::-webkit-scrollbar-track { 
background-color:#32312e; 
box-shadow:0px 0px 0px #000 inset; 
} 

::-webkit-scrollbar-thumb { 
-webkit-border-radius: 5px; 
border-radius: 0px; 
background-color:#28a7f0; 
background-image:url('https://yraaa.ru/_pu/24/59610063.png'); 
background-position:center; 
background-repeat:no-repeat; 
} 

::-webkit-resizer{ 
background-image:url(''); 
background-repeat:no-repeat; 
width:7px; 
height:0px 
} 

::-webkit-scrollbar{ 
width: 9px; 
}

Как сделать его:

• Полупрозрачным
  

• Плавно убирающимся после завершения очередной прокрутки
  

• Поверх вёрстки (это значит, что если цвет скроллбара сделать полупрозрачным, то под ним будет видно содержимое страницы и что он вообще никак не влияет на содержимое страницы; он просто находится на самом верхнем слое, выражаясь терминами графических редакторов).
  

Answer 1

[Алексей Николаев]

Единственная возможность - сделать для body overflow:hidden, и обернуть контент в div, который будет иметь кастомный скроллбар, которым вы будете управлять через JS.

Нативно стилизация скроллбара крайне туго поддерживается, тем более кроссбраузерно.