Hello!
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:
.x-grid-view::-webkit-scrollbar {
width: 50px
}
.x-grid-view::-webkit-scrollbar-button {
background-color: blue
}
.x-grid-view::-webkit-scrollbar-thumb {
background-color: tan;
}
.x-grid-view::-webkit-scrollbar-track-piece {
background-color: orange;
}
Then again, this will only work on google Chrome. MS-Edge, Firefox (and probably Safari, not tested), will still display the original scrollbar.
It is possible though, to use custom, javascript-aided implementations of scrollbars. As I see, basically the implementations around require a specific HTML attribute string to the DOM element in order to trigger the feature.
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:
<ViewConfig runat="server">
<Listeners>
<Render Handler="item.el.dom.setAttribute('data-simplebar', ''); debugger;" />
</Listeners>
</ViewConfig>
And, of course, inserting the javascript + css required by the solution you chose. From that point, you may customize it the way you need. And now it's up to understanding the chosen solution's API via its respective documentation.
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!