Slow Mouse Wheel Scrolling with fixed column

[aoifehannigan]

Hi Mottie,

When I scroll using the mouse wheel on a table with a fixed column it is incredibly slow. I notice it is the same in one of your demos and was wondering if you might be able to explain the cause of this.

Thanks,
Aoife

[Mottie]

Hi @AoifeH92!

What browser are you using? That might be one reason.

The reason there is an issue is because if you are using the mousewheel over the non-fixed part of the table, that scroll position needs to be applied to the fixed part (it's a separate table). And the same for the the fixed column. When you use the mousewheel over the fixed column, the scroll position needs to be applied to the non-fixed columns. Sounds easy... but then when you apply the scroll position, it triggers a scroll, so unless you throttle the scroll, you may end up in an infinite loop on one side updating the other side. This doesn't appear to be an issue in Chrome, but in Firefox and IE it is a big problem... unless Chrome changed something recently.

If you are interested in the details, the code has a flag that is set before it applies the scroll to prevent this issue. And it ends up throttling the scroll to be applied to about every 20ms.

[aoifehannigan]

Thanks for pointing me in the right direction!

I am actually using the latest version of Chrome and don't experience the issues on FF or IE (strange) using the code you directed me to I did a little work around to suit me.

I create a rule for chrome similar to FF and then incremented the scrollTop() value by 50 depending on whether the scroller was going up and down. It's not perfect by any means but I am a lot happier with it compared to the slow scrolling.

`var lastScrollTop = 0;

        c.$table
            .parent()
            // *** SCROLL *** scroll fixed column along with main
            .off( events )
            .on( events, function() {
                if ( wo.scroller_isBusy ) { return; }
                // using flags to prevent firing the scroll event excessively leading to slow scrolling in Firefox
                if ( !wo.scroller_isBusy && ( fixedScroll || !( tsScroller.isFirefox || tsScroller.isIE || tsScroller.isChrome) ) ) {
                    tableScroll = false;
                    var $this = $( this );
                    var scroll = $this.scrollTop();


                    if(tsScroller.isChrome){
                        if (scroll > lastScrollTop){
                           scroll = scroll + 50;
                        } else {
                           scroll = scroll - 50
                        }
                    }

                    lastScrollTop = scroll;
                    $fixedTbody[0].scrollTop = wo.scroller_saved[1] = scroll;
                    wo.scroller_saved[0] = $this.scrollLeft();
                    setTimeout( function() {
                        tableScroll = true;
                    }, 150 );
                }
            });
        // scroll main along with fixed column
        $fixedTbody
            .off( events )
            .on( events, function() {
                // using flags to prevent firing the scroll event excessively leading to slow scrolling in Firefox
                if ( !wo.scroller_isBusy && ( tableScroll || !( tsScroller.isFirefox || tsScroller.isIE || tsScroller.isChrome) ) ) {
                    fixedScroll = false;
                    var $this = $( this );
                    c.$table.parent()[0].scrollTop = wo.scroller_saved[1] = $this.scrollTop();
                    setTimeout( function() {
                        fixedScroll = true;
                    }, 150 );
                }
            })
            .scroll();`

[Mottie]

Thanks for sharing your code! I guess I should have checked the demo first LOL... it does look like Chrome has changed, so I'll see if there is a other method to match the scrolls...

[Mottie]

Ok, the latest update should perform much better .