I have done some research and, although not impossible, this is unfortunately not supported out-of-the box.
If you rely your application purely on google chrome (or other webkit-based-rendering browser), there is some level of CSS styling support for scrollbars. Here's a sample of what you can modify in the looks of the scrollbar of grid panels thru CSS:
Then again, this will only work on google Chrome. MS-Edge, Firefox (and probably Safari, not tested), will still display the original scrollbar.
The following article from Chris Coyier gives some explanation on how to customize scrollbars, talks about restrictions, and also suggests a couple third-party solutions: The Current State of Styling Scrollbars
For instance, if we want to enable the simple-scrollbar
(mentioned in the article above) in a grid panel; just create the data-simplebar
attribute in the grid view's DOM element, adding a block like this to the grid definition:
<Render Handler="item.el.dom.setAttribute('data-simplebar', ''); debugger;" />
There may be an issue if you need the scrollbar thinner than around 15 pixels where a blank space between the last column and itself. That's because Ext.NET "reserves" a space to let the usual scrollbars show nicely (otherwise the other axis' one will always show up, because of the space it takes in the viewport). If you fall into this, we can discuss possible solutions.
Hope this helps!