Home Shop Online Free Resources Blog / News Learn How To Terms And Conditions Contact Us

Custom Scrollbar

Chrome, Edge, Safari and Opera support the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser's scrollbar.

Adding Code to global.css

Customize Colors to Suit Your Preferences

1/* width */
2::-webkit-scrollbar {
3  width: 10px;
4}
5
6/* Track */
7::-webkit-scrollbar-track {
8  background: #171a1b;
9  border-right: 1px solid #73737334;
10  border-left: 1px solid #73737334;
11  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
12}
13
14/* Handle */
15::-webkit-scrollbar-thumb {
16  background: #347aa7;
17}
18
19/* Handle on hover */
20::-webkit-scrollbar-thumb:hover {
21  background: #21a2dc;
22}