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   lt div class  scroll  gt  lt  div gt    Here is my current CSS   scroll      width  200px  height  400px     overflow  hidden

User · Answer

scroll      width  200px  height  400px     overflow  auto

User · Answer

You re setting overflow  hidden  This will hide anything that s too large for the  lt div gt   meaning scrollbars won t be shown  Give your  lt div gt  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  lt div gt   change overflow to overflow  auto  You can also only show one scrollbar by using overflow-y or overflow-x

User · Answer

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

User · Answer

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

[html] CSS3 scrollbar styling on a div

Examples related to html

Examples related to css

Examples related to scrollbar