Vertical Scrolling Errors with Fixed Columns

JohnPasq

Good day, I was wondering if anyone else has encountered scrolling errors on android and iphone devices when using fixed columns. Here is a link to the site I am developing using Datatables.

magento.industrial-hardware.com/framing-channel-fittings-strut/channel-strut-nuts/channel-nuts.html
On Android there is a slight delay when scrolling on the left or right side. If I vertical scroll on the left the right side is a few milliseconds behind, the same goes when I vertical scroll on the left the right has a slight delay.

Here is a video of the error
https://www.youtube.com/watch?v=IRNeJqadcGc&feature=youtu.be

I received this error when I was debugging

On Iphone I'm having numerous errors but the one that concerns me is the vertical scroll at 25 seconds

https://www.youtube.com/watch?v=T1pyrirON4E&feature=youtu.be

kthorngren

I didn't find your Datatable init code but it looks like you are using fixedHeader and scrollX and scrollY. The docs states these features are incompatible:

https://datatables.net/extensions/fixedheader/

Not sure why you are seeing the delays or errors in scrolling but it could be in part due to these incompatibilities.

Kevin

allan

Using a passive event listener as already been mentioned here.

You mention that there is a slight delay at the moment - but if I were to use a passive event listener, then the alignment would be delayed until the scrolling has stopped.

Allan

JohnPasq

I'm a little confused here because the link that is shared directs me to Lighthouse (Google's audit tool). When I run the audit tool I get one suggestion for a passive listener line 4341 in jquery

// Only use addEventListener/attachEvent if the special events handler returns false
            if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
                // Bind the global event handler to the element
                if ( elem.addEventListener ) {
                    elem.addEventListener( type, eventHandle, false );

                } else if ( elem.attachEvent ) {
                    elem.attachEvent( "on" + type, eventHandle );
                }
            }
        }

This looks like it has nothing to do with the scrolling errors I am receiving.
From what I understand it looks like this piece of code in fixedcolumns.js is where the scrolling issue is occurring

// When the body is scrolled - scroll the left and right columns
$(this.dom.scroller)
.on( 'mouseover.DTFC touchstart.DTFC', function () {
if ( ! mouseDown ) {
mouseController = 'main';
}
} )
.on( 'scroll.DTFC', function (e) {
if ( ! mouseController && e.originalEvent ) {
mouseController = 'main';
}

                if ( mouseController === 'main' ) {
                    if ( that.s.iLeftColumns > 0 ) {
                        that.dom.grid.left.liner.scrollTop = that.dom.scroller.scrollTop;
                    }
                    if ( that.s.iRightColumns > 0 ) {
                        that.dom.grid.right.liner.scrollTop = that.dom.scroller.scrollTop;
                    }
                }
            } );

        var wheelType = 'onwheel' in document.createElement('div') ?
            'wheel.DTFC' :
            'mousewheel.DTFC';

        if ( that.s.iLeftColumns > 0 ) {
            // When scrolling the left column, scroll the body and right column
            $(that.dom.grid.left.liner)
                .on( 'mouseover.DTFC touchstart.DTFC', function () {
                    if ( ! mouseDown ) {
                        mouseController = 'left';
                    }
                } )
                .on( 'scroll.DTFC', function ( e ) {
                    if ( ! mouseController && e.originalEvent ) {
                        mouseController = 'left';
                    }

                    if ( mouseController === 'left' ) {
                        that.dom.scroller.scrollTop = that.dom.grid.left.liner.scrollTop;
                        if ( that.s.iRightColumns > 0 ) {
                            that.dom.grid.right.liner.scrollTop = that.dom.grid.left.liner.scrollTop;
                        }
                    }
                } )
                .on( wheelType, function(e) {
                    // Pass horizontal scrolling through
                    var xDelta = e.type === 'wheel' ?
                        -e.originalEvent.deltaX :
                        e.originalEvent.wheelDeltaX;
                    that.dom.scroller.scrollLeft -= xDelta;
                } );
        }

        if ( that.s.iRightColumns > 0 ) {
            // When scrolling the right column, scroll the body and the left column
            $(that.dom.grid.right.liner)
                .on( 'mouseover.DTFC touchstart.DTFC', function () {
                    if ( ! mouseDown ) {
                        mouseController = 'right';
                    }
                } )
                .on( 'scroll.DTFC', function ( e ) {
                    if ( ! mouseController && e.originalEvent ) {
                        mouseController = 'right';
                    }

                    if ( mouseController === 'right' ) {
                        that.dom.scroller.scrollTop = that.dom.grid.right.liner.scrollTop;
                        if ( that.s.iLeftColumns > 0 ) {
                            that.dom.grid.left.liner.scrollTop = that.dom.grid.right.liner.scrollTop;
                        }
                    }
                } )
                .on( wheelType, function(e) {
                    // Pass horizontal scrolling through
                    var xDelta = e.type === 'wheel' ?
                        -e.originalEvent.deltaX :
                        e.originalEvent.wheelDeltaX;
                    that.dom.scroller.scrollLeft -= xDelta;
                } );
        }

However according to the instructions in the given google link there is nowhere to add the passive event listener

allan

I think it boils down to basically the same thing - FixedColumns is updating the DOM inside the event listener. That action makes it not passive (active?). Looks like different tools just have different ways of reporting it.

To resolve the code needs to be updated to either not keep the fixed element's scrolling in sync while scrolling is happening (I can already see the bug reports coming in about that), or using a debounce / throttle, which might work - I'm a little concerned about how smooth it will be, but it is worth experimenting with.

Allan