Progressively slower horizontal scrolling

[NHerw]

When scrolling horizontally through a grid using shift + mousewheel, the scroll speed gets progressively slower the further I scroll.

Please take a look at the video I attached.

My physical scrolling speed stays the same but the further i scroll towards either end of the grid, the speed in the browser decreases.

slickgrid-scrolling-issue.mp4

This issue doesn't appear on any other scrollable html divs, so I think the issue is with slickgrid. The behavior is the same in firefox and chrome.

I'm using Slickgrid v3.0.4 and Chrome v114.0.5735.134

Unfortunately I have no clue which code is relevant to this issue. But if you have any ideas, I will provide whatever you need.

Thanks :)

Edit:
I noticed that in the "Fill browser" example from mleibman, the horizontal scrolling works well.
But in this repo's example, the horizontal scrolling seems to be disabled.

[ghiscoding]

if you find the issue and find a fix then feel free to submit a Pull Request. There was this old PR that wasn't merged, not sure if it was related or not #653. The only other thing that could influence this would be if any onScroll event is bind which could potentially slow it down, some plugins do subcribe to that event in some cases

[NHerw]

I've found that commenting out the following lines fixes the scrolling speed issue. but it stops the header from moving along with the grid columns.

SlickGrid/slick.grid.js

Lines 4416 to 4442 in 6225f46

	setTimeout(function () {
	$viewportScrollContainerX[0].scrollLeft = scrollLeft;
	$headerScrollContainer[0].scrollLeft = scrollLeft;
	$topPanelScroller[0].scrollLeft = scrollLeft;
	$headerRowScrollContainer[0].scrollLeft = scrollLeft;
	if (options.createFooterRow) {
	$footerRowScrollContainer[0].scrollLeft = scrollLeft;
	}
	if (options.createPreHeaderPanel) {
	if (hasFrozenColumns()) {
	$preHeaderPanelScrollerR[0].scrollLeft = scrollLeft;
	} else {
	$preHeaderPanelScroller[0].scrollLeft = scrollLeft;
	}
	}
	if (hasFrozenColumns()) {
	if (hasFrozenRows) {
	$viewportTopR[0].scrollLeft = scrollLeft;
	}
	} else {
	if (hasFrozenRows) {
	$viewportTopL[0].scrollLeft = scrollLeft;
	}
	}
	}, 0);
	}

[ghiscoding]

@NHerw
can you try to remove the setTimeout wrapper instead and keep just the code that is inside it, see if that helps. The setTimeout was added to fix a Chrome browser issue, however the Chrome team did eventually fix UI flickering issue that we had so we could probably remove it now. Basically rolling back PR #722, give that a try and see if that helps

if removing the setTimeout doesn't help, then could you try commenting each assignment 1 by 1 until you find the one causing the problem.

[6pac]

The probable issue is that there are a cascade of the SetTimeout events which back up. Another approach would be to clear any previous events when setting a new one. This is done in other places in the grid code.

[NHerw]

@ghiscoding Removing the setTimeout wrapper seems to work for Chrome! I've also tested it in Firefox, and it doesn't seem to cause any Issues there either.

I'll do a pull request

@6pac Clearing the setTimeout didn't work for me. Here's how I tried it, maybe that was the wrong approach:

I created a global variable called scrollTimeout and assigned the setTimeout function to it. Then I tried clearing the Timeout before and after the setTimeout was started, but neither worked.

First attempt:

Window.clearTimeout(scrollTimeout)
scrollTimeout = setTimeout(function () {
          $viewportScrollContainerX[0].scrollLeft = scrollLeft;
          $headerScrollContainer[0].scrollLeft = scrollLeft;
          $topPanelScroller[0].scrollLeft = scrollLeft;
...

Second attempt:

scrollTimeout = setTimeout(function () {
          $viewportScrollContainerX[0].scrollLeft = scrollLeft;
          $headerScrollContainer[0].scrollLeft = scrollLeft;
          $topPanelScroller[0].scrollLeft = scrollLeft;
...
}
Window.clearTimeout(scrollTimeout)

PS: I found out that disabling smooth scrolling in chrome fixed the Issue, but I can't expect users to disable that setting.