White spaces while scrolling in FixedSizeList with heavy Rows (8 Material UI cards in a row)

[ashishgupta1989]

Hi,

Thank you for this amazing library.

I am facing issues when the Row component is heavy while using FixedSizeList. I am getting white spaces when scrolling very fast using the trackpad.

I have put a demo to illustrate this issue (our actual cards are much heavier than the ones used in the demo) - https://codesandbox.io/s/n746q40970 / https://n746q40970.codesandbox.io/

I am rendering 8 material UI cards within a single row and I can see white spaces while scrolling, but when I use 1 or 2 cards I do not see these white spaces.

Can you please help figure out how to handle this scenario?

Thanks
Ashish

[bvaughn]

This type of white space when scrolling first starts is, unfortunately, a necessary trade-off made with the windowing techniques used by this library. Unless we were to force scroll handlers to be sync– (which would just make the scrolling feel slow and janky to the user)– then we can't avoid this entirely.

Some things you can do:

• Make row renderers as fast as possible. In some cases you may consider using a lighter weight representation while scrolling is active (see here).
• Use memoization techniques like this. See here for a demo.
• Experiment with different overscanRowCount values. (Maybe 2 would work better for 1 in your case?)
• Use the profiler to verify rendering performance.
• Verify performance in production mode. (Code Sandbox demos are running in DEV mode which is much slower.)

[noah79]

@bvaughn - I work with @ashishgupta1989 and found that if I disable the chrome flag "Smooth Scrolling" then performance is great. How would we go about making the scroll handler synchronous? I tried wrapping the setState in _this._onScrollVertical() with a requestAnimationFrame() but it didn't have the same impact as the flag change. I would love to be able to just set a scrollSync flag on the component to get the same behavior.

[noah79]

So this works:

return createElement(outerElementType || outerTagName || 'div', {
	...
	onWheel: function (e) {
		e.preventDefault()
		e.currentTarget.scrollTop += e.deltaY
	},

It was inspired by this stack overflow answer: https://stackoverflow.com/questions/12747746/how-to-disable-smooth-scrolling-in-chrome

If I submit a pull request with a new prop scrollSync that hooks up this fix, would you accept it?

[bvaughn]

You're always welcome to submit pull requests for consideration. I'll admit that forcing scroll event handlers to be blocking is something that I probably don't want to add support for to the API, but I'll read the PR and give it consideration.