Customize Scrollbar look

You can customize the look of scrollbar using CSS.
Here is a snippet of sample custom scrollbar UI,

( I have introduced :hover  because I want to show scrollbar on an element only when user hover on that element )




 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
*::-webkit-scrollbar {
  width: 5px;
 display: none;
  background-color: #666666;
}

*:hover::-webkit-scrollbar {
  width: 5px;
  display: block;
  background-color: #666666;
}
*::-webkit-scrollbar-track {
  background: #ddd;
}

*::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 20px;
}

Comments

Popular posts from this blog

Sciter : GUI Application with Golang using HTML/CSS

setup hyperledger fabric on windows 10

Host Multiple Web Sites of Go Using Reverse Proxy Example