vueuse / vueuse

Collection of essential Vue Composition Utilities for Vue 2 and 3

Home Page:https://vueuse.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

useScrollLock: Compensate for scrollbar with padding

mrleblanc101 opened this issue · comments

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

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