CSS3 scrollbar styling on a div

Question

How can I style webkit scrollbars with CSS3?

I mean these properties:

::-webkit-scrollbar {     width: 12px; }                      ::-webkit-scrollbar-track {     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);      border-radius: 10px; }                      ::-webkit-scrollbar-thumb {     border-radius: 10px;     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);  } 

Here is my div tag:

<div class="scroll"></div> 

Here is my current CSS:

.scroll {     width: 200px; height: 400px;     overflow: hidden; }     

Answer 1

Setting overflow: hidden hides the scrollbar. Set overflow: scroll to make sure the scrollbar appears all the time.

To use the ::webkit-scrollbar property, simply target .scroll before calling it.

.scroll {    width: 200px;    height: 400px;     background: red;    overflow: scroll; } .scroll::-webkit-scrollbar {     width: 12px; }  .scroll::-webkit-scrollbar-track {     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);      border-radius: 10px; }  .scroll::-webkit-scrollbar-thumb {     border-radius: 10px;     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);  } ​ 

See this live example

Answer 2

The problem with the css3 scroll bars is that, interaction can only be performed on the content. we can't interact with the scroll bar on touch devices.