Styling scrollbar для браузера google chrome

Question

Я пытаюсь поделиться некоторыми знаниями, опубликовав некоторые вопросы с трюками css (и трюки jquery в других темах) и ответьте на него.
Здесь я имею дело с стилей полосы прокрутки для браузера Chrome Chrome.

Answer 1

Просто добавьте эти правила CSS:

1. ::-webkit-scrollbar
2. ::-webkit-scrollbar-button
3. ::-webkit-scrollbar-track
4. ::-webkit-scrollbar-track-piece
5. ::-webkit-scrollbar-thumb
6. ::-webkit-scrollbar-corner
7. ::-webkit-resizer

Вот что делает каждое правило:

Answer 2

Вот простой пример заказной скроллинга с помощью CSS

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

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 

Вот как это будет выглядеть.

исх: https://css-tricks.com/custom-scrollbars-in-webkit/