Menu
Is it possible to increase the width of a scrollbar on a <div> element placed inside the <body>?
I am not talking about the default scrollbar on the browser itself, this page runs in full screen mode and because the browser scrollbar never comes into picture, the inner <div> element has its own scrollbar.
451
The scrollbar-width property is used to set the width or thickness of an element's scrollbar when shown. This property can be used on pages where the user interface requires the element to be displayed more prominently and shrinking the scrollbar width gives more space to the element.
How to Customize the Scrollbars Width to be Narrower or Wider. If you want to change the scroll width too (or only the scroll width), you'll find it just under ScrollHeight in the right pane. So double-click/tap on the ScrollWidth to open the Edit String window.
auto is the default value and will render the standard scrollbars for the user agent. thin will tell the user agent to use thinner scrollbars, when applicable. none will hide the scrollbar completely, without affecting the element's scrollability.
To get the width of the scrollbar, you use the offsetWidth and clientWidth of the Element : The offsetWidth returns the width of the Element in pixels including the scrollbar. The clientWidth returns the with of the Element in pixels without the scrollbar.
This can be done in WebKit-based browsers (such as Chrome and Safari) with only CSS:
::-webkit-scrollbar { width: 2em; height: 2em } ::-webkit-scrollbar-button { background: #ccc } ::-webkit-scrollbar-track-piece { background: #888 } ::-webkit-scrollbar-thumb { background: #eee } JSFiddle Demo
References:
132
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
