Demo application drag based scrolling issues with Chrome and Edge on Mac

[blongstreth]

Hello:

I was trying out the demo application using various browsers (latest versions) in Mac (macOS 12.6) and Windows (10). I noticed that I am not able to easily drag the scrollbar to any desired position using Chrome and Edge for Mac. It is feels like it is stuck or really lags behind whereby it is unusable. The other browsers seem to function reasonably well. In my adventure, I was also able to position the scrollbar such that it would cause to the top and bottom spacer elements to swap height values back and forth repeatedly (infinite loop) until I managed to change position to a place where it would break out of this behavior. This too was found in Chrome/Edge on Mac. Anyway, I will try to provide more details on this issue if I can get the actual drag scrolling to work. With that said, I would like to help troubleshoot these issues further and was wondering if you have any advice please.

Regards,

Bradley

[oleggrishechkin]

Hi, @blongstreth. Chrome supports overflow-anchor and automatically set scroll position when some items above the top change height and shift content. That's why you can't drag scrollbar smoothly.

If you want to opt-out this behaviour you can use "overflow-anchor: none" css prop (for scroll container styles) and oveflowAnchor="none" in ViewportList props. After that scroll should work as it's work in Safari.

[blongstreth]

Hi, thanks for the quick reply! I have tried opting out of the overflow-anchor as you suggested on both Chrome and Edge on Mac and no change in behavior. Please note that I did try this in the past, before filing the issue. It just doesn't want to drag or if it does, it barely moves and lags behind.

[oleggrishechkin]

This scroll behaviour is normal, but I think I can do better estimation and improve this behaviour. The "loop" which you describe above is a worse issue.

[oleggrishechkin]

@blongstreth, I am investigating...

Looks like dragging scrollbar "lags behind" because chrome try to render elements and stop scroll during this render but in safari scroll isn't blocking during render. (this is my thought).

I can avoid rendering new items while scrolling if scroll was change significantly (fast scroll) and render new items only when scrolling was slow down or even was stopped. It's not fully fix this annoing behaviour, but it can help in most cases I guess.

[blongstreth]

Thanks for looking into it! For the infinite "loop" issue, I think resizing the browser and adjusting the scroll position can reproduce the issue if you work at it. Also, I have found that if I move the scroll position to roughly 50%, then click in the scroll space between the top and the current position and hold the mouse button down, it can cause it to keep triggering the scrolling even after letting up on the mouse. Sometimes it will stop and sometimes not. Thus, a combination of resizing the browser window (viewport resize) and moving the scroll (drag & scroll) and click & holding scrolling can eventually get you in a bad state. If I can get a repeatable sequence, I will try it on multiple browsers and let you know. Thanks again!

[oleggrishechkin]

@blongstreth I published a beta version with scrollThreshold property. You can try to use different values to improve fast scrolling. I used 5000 in demo. If scroll diff more than scrollThreshold then setting the indexes will be skipped (no re-render).

Also I slightly change estimations, so please try to reproduce bottom and top spacers heights change loop.

demo

Also I notice that with mouse scroll works better. I try to use trackpad on Mac and scroll feels really bad with lags.

[blongstreth]

Thanks for working on these issues. The drag scrolling has greatly improved but it can get a little out of sync (lead/lag) occasionally (nothing too bad). As far as the loop issue, I can still make it happen regardless of the scrollThreshold values; move scroll to 50%, click and hold for 2 to 5 seconds somewhere near the top and it will eventually lock into a constant scrolling mode. I can get it to stop by drag scrolling. Next, I moved the scroll to 5% from the top (enough space so I can click and hold). It started the scroll lock but it eventually stopped when it got to the top. Finally, I am trying to get the loop scroll to happen by clicking between scroll and max value (bottom). So far I can't make it do it! Maybe it is only a backwards issue? I will keep trying.

[dpatra]

Any Progress on this, the scrollbar drag lags with v7.1.1

[oleggrishechkin]

Any Progress on this, the scrollbar drag lags with v7.1.1

@dpatra Nope, sadly. scrollThreshold can allow you to drag scrollbar with some pitfalls (items disappear), but inifinite scroll (constant scrolling mode) still can happened while you click and hold on scrollbar. I supposed it happened because browser scroll by steps when you click and hold, and library scroll too (to keep scroll correct when new items rendered). Also looks like this is a Chrome related issue since I can't reproduce constant scroll mode in Safari and Firefox.

I created a demo with scrollThreshold and overflowAnchor="none"