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;
}
.scroll {
width: 200px; height: 400px;
overflow: auto;
}
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.
You're setting overflow: hidden
. This will hide anything that's too large for the <div>
, meaning scrollbars won't be shown. Give your <div>
an explicit width and/or height, and change overflow
to auto
:
.scroll {
width: 200px;
height: 400px;
overflow: scroll;
}
If you only want to show a scrollbar if the content is longer than the <div>
, change overflow
to overflow: auto
. You can also only show one scrollbar by using overflow-y
or overflow-x
.
Source: Stackoverflow.com