Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect QInfiniteScroll reverse mode behavior depending on the DOM changes made #17848

Open
AlexanderMartynoff opened this issue Feb 21, 2025 · 1 comment
Labels
area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-webpack kind/bug 🐞 Qv2 🔝 Quasar v2 issues

Comments

@AlexanderMartynoff
Copy link

AlexanderMartynoff commented Feb 21, 2025

What happened?

When using QInfiniteScroll in reverse mode then vertical scroll position after call done argument computed incorrect. Only if the displayed content has not changed. The scrolling behavior in the browsers can be controlled using overflow-anchor css rule, but the current implementation QInfiniteScroll assumes that the scroll is always moved by heightDifference position as a result of updating the content in the scroll container - this is what happens when the content changes completely (for example, if not used :key="item.id"), but when new content is added to the old one, the browser itself adjusts the scroll position and in this case QInfiniteScroll set incorrect scroll position. An animation of the problem demonstration is attached, as well as a link to the codepen

zapis-ekrana-2025-02-21-v-211625_yW5xubsm.mp4

What did you expect to happen?

The scroll behaves as shown in the documentation and

Reproduction URL

https://codepen.io/martynoff/pen/XJWdVOm?editors=1010

How to reproduce?

The animation above shows how to scroll up and expect the content to shift. There is no need to scroll to the very top position

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome, Safari, Android

Quasar info output

Relevant log output

Additional context

@github-actions github-actions bot added area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-webpack labels Feb 21, 2025
@AlexanderMartynoff
Copy link
Author

I solved this problem with minimal changes and would like to attach pull request

@AlexanderMartynoff AlexanderMartynoff changed the title Different QInfiniteScroll reverse mode behavior depending on the DOM changes made Incorrect QInfiniteScroll reverse mode behavior depending on the DOM changes made Feb 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-webpack kind/bug 🐞 Qv2 🔝 Quasar v2 issues
Projects
None yet
Development

No branches or pull requests

1 participant