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

useScrollLock: Compensate for scrollbar with padding #3882

Open
4 tasks done
mrleblanc101 opened this issue Mar 22, 2024 · 1 comment
Open
4 tasks done

useScrollLock: Compensate for scrollbar with padding #3882

mrleblanc101 opened this issue Mar 22, 2024 · 1 comment
Labels
direction: approved The direction of feature/change is approved by the team. May require some small changes. enhancement New feature or request vue: upstream

Comments

@mrleblanc101
Copy link

mrleblanc101 commented Mar 22, 2024

Clear and concise description of the problem

Currently, locking the window scroll move the page content because the viewport becomes larger.

2024-03-22 15 45 33

Suggested solution

Add an option to compensate by adding padding to the element (html/body) like other popular packages: https://www.npmjs.com/package/body-scroll-lock#reservescrollbargap

Alternative

Wrap this in a composable that does it manually

Additional context

No response

Validations

@mrleblanc101 mrleblanc101 added the enhancement New feature or request label Mar 22, 2024
@dosubot dosubot bot added direction: approved The direction of feature/change is approved by the team. May require some small changes. vue: upstream labels Mar 22, 2024
@mrleblanc101
Copy link
Author

Other alternative, use https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
But it is not supported in Safari yet, and even when it land it won't solve the problem for anyone that has not updated
Screenshot 2024-03-22 at 3 56 02 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
direction: approved The direction of feature/change is approved by the team. May require some small changes. enhancement New feature or request vue: upstream
Projects
None yet
Development

No branches or pull requests

1 participant