Menu
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
background-color:#808080;
}
Why do the width and height attributes not work?
494
While the display property is inline , height and width will not work. display :inline; By changing the display property from inline to block or inline-block , height and width should be worked properly.
Height % is based on it's parent (so you have to set every element above the target element to 100%) , there are a few workarounds to this though. For instance you can set it to height: 100vh; This will create the element to be 100% of your window height. Or you can use px instead.
To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.
width is for vertical scrollbars and height affects horizontal scrollbars. You can't define height for a vertical scrollbar. That is dependent on content size.
If you want to add background images to your scrollbar, they are added like normal elements:
::-webkit-scrollbar {
width: 50px;
height: 50px;
background:-webkit-linear-gradient(0, blue 50%, white 100%);
}
::-webkit-scrollbar-thumb {
background-color:#808080;
background:url("http://www.topdesignmag.com/wp-content/uploads/2010/12/137.jpg");
}
Fiddle
102
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
