Problem with hiding vertical scrollbar on scrollable grid

[bwpsalan]

In the below fiddle, I have a grid that the user can scroll vertically using their mouse wheel. I have used the "scrollbars: false" config setting on the Scroller object to hide the vertical scrollbar. How do I get rid of the space that is left behind by that scrollbar?



Thanks

[bwpsalan]

Anybody got any ideas? Do you think this is a bug?

[Gary Schlosberg]

I don't think it's a bug since the scrollbars config on Scroller is private. So you want scrollability but no visible scrollbars?

[bwpsalan]

Hi Gary,

Yes, I would like scrollability but no visible scrollbars. I have another grid beside this one which has its scrollbar visible. When either grid is scrolled, the other one is kept in sync. Just need to get rid of that space.

Cheers

[Gary Schlosberg]

Here's a thread with a solution that might work for you:
https://www.sencha.com/forum/showthread.php?292720

[bwpsalan]

Gary, thanks very much. I figured out a solution from that thread.

For anyone else interested, I set "scrollable" to false and then added the below "afterrender" listener to my grid.

        listeners: {
            afterrender: function (me) {
                var viewEl = me.getView().getEl();
                
                viewEl.on('mousewheel', function (e) {
                    viewEl.setScrollTop(viewEl.getScrollTop() + e.browserEvent.deltaY);
                });
            }
        }

I have updated my fiddle with these changes.

Cheers

[Gary Schlosberg]

Glad to hear it, and thanks for sharing your solution with the community!