[6.7 Modern] Grid scrolling is not smooth and it is jumpy

[lovelyhibabe]

For 6.6 and 6.5 Modern, grid scroll smoothly.

Comparision:

https://examples.sencha.com/extjs/6....ern#array-grid

https://examples.sencha.com/extjs/6.7.0/examples/kitchensink/frame-index.html?modernl#array-grid

[gwyn_carwardine]

Fine for me in Chrome.

[Animal]

It was perhaps ill judged to release the 9 billion pixel scroller as the default scroller in grids. I think that's what's doing it.

[EPV]

The scrolling is useless in modern on touch device. Can be simulated in Chrome emulating touch device.
Any updates on bug fix?

/ Emil

[rakumar]

Hello,

Thank you for contacting us on Sencha Forums!

We are unable to reproduce this, we have checked in browser and mobile dev mode in browser as well so request you to provide steps to duplicate this issue and work on a resolution.

Regards,
Kumar
Sencha Support.

[lovelyhibabe]

I add an animation to the virtualScroller of infinite list/grid, it's not as smooth as it in 6.6, but it's getting there

Ext.define(null, {
    override: 'Ext.scroll.VirtualScroller',
    
    privates: {
        onWheel: function(e) {
            var me = this,
                self = me.self,
                deltaX = e.deltaX,
                deltaY = e.deltaY,
                position = me.position,
                oldX = position.x,
                oldY = position.y,
                x = me.constrainX(position.x + deltaX),
                y = me.constrainY(position.y + deltaY);
                
            console.log(deltaY);
            if (x !== oldX || y !== oldY) {
                me.isWheeling = self.isWheeling = true;
                me.doScrollTo(x, y, { easing: 'ease-out', duration: 150 }); // animation
                e.preventDefault();
            } else if (me.isScrolling) {
                me.onScrollEnd();
            }
        }
    }
});

Fiddle:
https://fiddle.sencha.com/#view/editor&fiddle/2sks

[lovelyhibabe]

Better solution:

Css below is all we need:

.x-virtualscroller .x-scroller-inner {
    transition: transform 0.15s ease-out 0s;
}