Home/ Questions/Q 8623569
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T07:18:47+00:00

I need to display a custom scrollbar. I would like to avoid using a

  • 0

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); 
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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. )

    • 0