css scrollbar

1::-webkit-scrollbar {
2  width: 10px;
3}
4  ::-webkit-scrollbar-track {
5  background: #f1f1f1; 
6}
7  ::-webkit-scrollbar-thumb {
8  background: #888; 
9    border-radius:10px;
10}
11::-webkit-scrollbar-thumb:hover {
12  
13  background: #555; 
14} 
15

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#style-1::-webkit-scrollbar-track
2{
3	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
4	border-radius: 10px;
5	background-color: #F5F5F5;
6}
7
8#style-1::-webkit-scrollbar
9{
10	width: 12px;
11	background-color: #F5F5F5;
12}
13
14#style-1::-webkit-scrollbar-thumb
15{
16	border-radius: 10px;
17	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
18	background-color: #555;
19}

1::-webkit-scrollbar {
2    width: 12px;
3}
4 
5::-webkit-scrollbar-track {
6    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
7    border-radius: 10px;
8}
9 
10::-webkit-scrollbar-thumb {
11    border-radius: 10px;
12    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
13}

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}

1body {
2  width: calc(100vw - (100vw - 100%));
3}