It is possible to specify the scrollbar image with HTML5?
Solution 1
It's actually possible, if browser does support styling of toolbar elements (= is based on WebKit). Although it's not mentioned in many tutorials (such as this brilliant one, for example), you can just use background-url
property to use custom image instead of color.
For example, in this page I've changed (in Chrome Developer Tools) styling to...
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: url('http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/header-demos.jpg');
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
... and voila, I have some cyanid scroller. )
Solution 2
Yes you can, but it is not supported in every browser. Webkit (Chrome etc) has support for this using css:
-webkit-scrollbar
-webkit-scrollbar-button
-webkit-scrollbar-track
-webkit-scrollbar-track-piece
-webkit-scrollbar-thumb
-webkit-scrollbar-corner
-webkit-resizer
Read more: https://www.webkit.org/blog/363/styling-scrollbars/
In Internet Explorer you can user css like scrollbar-face-color or -ms-scrollbar-face-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-arrow-color
-ms-scrollbar-base-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-track-color
Read more: http://msdn.microsoft.com/en-us/library/ie/hh772048%28v=vs.85%29.aspx
As far as I know, other browsers do not support this at the moment.
Benjamin Crouzier
I am a former developer (rails/react/aws/postgres), and I now study AI and cognitive science full-time. Currently living in Paris. Github profile: https://github.com/pinouchon Blog: http://pinouchon.github.io/
Updated on June 05, 2022Comments
-
Benjamin Crouzier almost 2 years
I need to display a custom scrollbar. I would like to avoid using a jQuery plugin if possible. So can I so something like this with HTML5 & CSS3 ? :
.myScrollableBox { width: 200px; height: 500px; /* Display scrollbar if content is bigger than the box */ overflow: auto; /* This doesn't work, but can I do something similar? */ scrollbar-image: url(/images/myscrollbar.png); }
-
raina77ow over 11 yearsWell, sometimes even more unimaginable things are made possible by these moderny browsers. )
-
arkascha over 11 years@raina77ow: sure, you could for example take the browsers source code and reprogram it. That certainly is possible, true.