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

useScroll's arrivedState not responsive to changes in DOM #4265

Open
7 tasks done
haykkh opened this issue Oct 3, 2024 · 1 comment · May be fixed by #4269
Open
7 tasks done

useScroll's arrivedState not responsive to changes in DOM #4265

haykkh opened this issue Oct 3, 2024 · 1 comment · May be fixed by #4269

Comments

@haykkh
Copy link
Contributor

haykkh commented Oct 3, 2024

Describe the bug

Certain changes to the DOM (adding/removing elements, changing size of elements) might cause the arrived state of a scrolling container to change, but arrivedState returned by useScroll doesn't reflect these changes.

First example in reproduction

you have:

  • a scrolling container with a max height of 300px
  • an element inside of height 800px
  • the container is scrolled to the very top
  • arrivedState will be { ..., bottom: false }

If the element inside's height shrinks down to 200px (click the toggle container height button) the container will not have any space to scroll down but arrivedState will not show this change

Second example in reproduction

you have:

  • a scrolling container with a max height of 300px
  • an element inside of height 500px:
  • the container is scrolled to the very top
  • arrivedState will be { ..., bottom: false }

if you suddenly remove the element inside (click the toggle red div button) the container will not have any space to scroll down but arrivedState will not show this change

Reproduction

https://stackblitz.com/edit/vitejs-vite-fdvkgx

System Info

System:
    OS: macOS 15.0
    CPU: (10) arm64 Apple M1 Max
    Memory: 152.77 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.11.1/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 9.7.0 - ~/.nvm/versions/node/v20.11.1/bin/pnpm
  Browsers:
    Chrome: 129.0.6668.90
    Safari: 18.0
  npmPackages:
    @vueuse/core: ~11.1.0 => 11.1.0
    @vueuse/shared: ~11.1.0 => 11.1.0
    vue: ^3.4.0 => 3.4.27

Used Package Manager

npm

Validations

@mrleblanc101
Copy link

mrleblanc101 commented Oct 3, 2024

I had a similar issue, I used the undocumented measure function to recalculate the arrivedState value.
I opened an issue to add measure to the documentation: #4266

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants