css scrollbar like mac

Solutions on MaxInterview for css scrollbar like mac by the best coders in the world

showing results for - "css scrollbar like mac"
Benoit
08 Sep 2018
1    /* Customize website's scrollbar like Mac OS
2Not supports in Firefox and IE */
3    /* total width */
4    .scrollbar::-webkit-scrollbar {
5        background-color: #fff;
6        width: 16px
7    }
8
9    /* background of the scrollbar except button or resizer */
10    .scrollbar::-webkit-scrollbar-track {
11        background-color: #fff
12    }
13
14    .scrollbar::-webkit-scrollbar-track:hover {
15        background-color: #f4f4f4
16    }
17
18    /* scrollbar itself */
19    .scrollbar::-webkit-scrollbar-thumb {
20        background-color: #babac0;
21        border-radius: 16px;
22        border: 5px solid #fff
23    }
24
25    .scrollbar::-webkit-scrollbar-thumb:hover {
26        background-color: #a0a0a5;
27        border: 4px solid #f4f4f4
28    }
29
30    /* set button(top and bottom of the scrollbar) */
31    .scrollbar::-webkit-scrollbar-button {
32        display: none
33    }
34
35    /* div box */
36    body {
37        background-color: #babac0
38    }
39
40    .scrollbar {
41        height: 75vh;
42        width: 25vw;
43        min-width: 150px;
44        background: #fff;
45        overflow-y: scroll
46    }
47
48    .overflow {
49        min-height: 100vh
50    }