custom scrollbar

1body::-webkit-scrollbar {
2  width: 12px;               /* width of the entire scrollbar */
3}
4body::-webkit-scrollbar-track {
5  background: orange;        /* color of the tracking area */
6}
7body::-webkit-scrollbar-thumb {
8  background-color: blue;    /* color of the scroll thumb */
9  border-radius: 20px;       /* roundness of the scroll thumb */
10  border: 3px solid orange;  /* creates padding around scroll thumb */
11}

1/* Works on Firefox */
2* {
3  scrollbar-width: thin;
4  scrollbar-color: blue orange;
5}
6
7/* Works on Chrome, Edge, and Safari */
8*::-webkit-scrollbar {
9  width: 12px;
10}
11
12*::-webkit-scrollbar-track {
13  background: orange;
14}
15
16*::-webkit-scrollbar-thumb {
17  background-color: blue;
18  border-radius: 20px;
19  border: 3px solid orange;
20}

1/* width */
2*::-webkit-scrollbar {
3  width: 10px;
4}
5
6/* Track */
7*::-webkit-scrollbar-track {
8  background: #f1f1f1; 
9}
10 
11/* Handle */
12*::-webkit-scrollbar-thumb {
13  background: #888; 
14}
15
16/* Handle on hover */
17*::-webkit-scrollbar-thumb:hover {
18  background: #555; 
19}

1
2// scroll bar
3/* width */
4::-webkit-scrollbar {
5  background-color: hsl(235, 24%, 19%);
6  width: 8px;
7}
8
9/* Track */
10::-webkit-scrollbar-track {
11  background-color: hsla(235, 21%, 11%, 0.322);
12  box-shadow: 0 0 3px hsl(235, 21%, 11%);
13  border-radius: 10px;
14}
15
16/* Handle */
17::-webkit-scrollbar-thumb {
18  background-color: hsl(235, 21%, 11%);
19  border-radius: 10px;
20}
21
22/* Handle on hover */
23::-webkit-scrollbar-thumb:hover {
24  background: hsl(220, 98%, 61%);
25}

1::-webkit-scrollbar              { /* 1 */ }
2::-webkit-scrollbar-button       { /* 2 */ }
3::-webkit-scrollbar-track        { /* 3 */ }
4::-webkit-scrollbar-track-piece  { /* 4 */ }
5::-webkit-scrollbar-thumb        { /* 5 */ }
6::-webkit-scrollbar-corner       { /* 6 */ }
7::-webkit-resizer                { /* 7 */ }
8
9
10/* Different States */
11:horizontal
12:vertical
13:decrement
14:increment
15:start
16:end 
17:double-button
18:single-button
19:no-button
20:corner-present
21:window-inactive
22
23
24/* All toghether example */
25::-webkit-scrollbar-track-piece:start {
26   /* Select the top half (or left half) or scrollbar track individually */
27}
28
29::-webkit-scrollbar-thumb:window-inactive {
30   /* Select the thumb when the browser window isn't in focus */
31}
32
33::-webkit-scrollbar-button:horizontal:decrement:hover {
34   /* Select the down or left scroll button when it's being hovered by the mouse */
35}
36
37
38/* Example */
39body::-webkit-scrollbar {
40    width: 1em;
41}
42body::-webkit-scrollbar-track {
43    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
44}
45body::-webkit-scrollbar-thumb {
46  background-color: darkgrey;
47  outline: 1px solid slategrey;
48}

1  body::-webkit-scrollbar {
2    width: 12px;
3}
4body::-webkit-scrollbar-thumb {
5    background: #ff9c44;
6    border-radius: 6px;
7}
8
9by moheen