Comments (9)
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.
from react-viewport-list.
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.
from react-viewport-list.
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.
from react-viewport-list.
@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.
from react-viewport-list.
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!
from react-viewport-list.
@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.
Also I notice that with mouse scroll works better. I try to use trackpad on Mac and scroll feels really bad with lags.
from react-viewport-list.
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.
from react-viewport-list.
Any Progress on this, the scrollbar drag lags with v7.1.1
from react-viewport-list.
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"
from react-viewport-list.
Related Issues (20)
- Thank you HOT 3
- New items added to bottom of list. After refresh, appeared first. HOT 6
- Incorrect page scrolling behavior when `initialIndex` or `scrollToIndex` is used HOT 4
- Why does it work when height varies? HOT 2
- List items rendered with undefined HOT 2
- Endless Scrolling Loop HOT 28
- scroll to bottom while having async rendering items HOT 2
- Scroll to bottom on initial render HOT 2
- flew wrap not work HOT 1
- Is infinite scroll pagination supported? HOT 1
- Scroll to position HOT 3
- remove spacer in list HOT 3
- Scroll X and Scroll Y and sticky rows and columns HOT 3
- Question regarding CPU usage when idle HOT 7
- Is SSR supported? HOT 8
- Any way to show a dynamic number of columns? HOT 2
- Unexpected scroll jump with initialIndex set to last item HOT 8
- Having trouble getting axis="x" to work HOT 3
- justify-content: flex-end; hides the scroll bar. HOT 2
- Styling is breaking if used in material ui table HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-viewport-list.