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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Suggestion: Hide scrollbar with CSS instead of overflow-property #27

Open
joosia opened this issue Feb 9, 2024 · 0 comments
Open

Suggestion: Hide scrollbar with CSS instead of overflow-property #27

joosia opened this issue Feb 9, 2024 · 0 comments

Comments

@joosia
Copy link

joosia commented Feb 9, 2024

Hey,

First of all thanks for the simple and smooth (pun intended) package. 馃憦 Was trying it out and seems to be working fine. However in my use case hiding overflow isn't an option, since the content should be visible during reflow and the content has it's own entry transition using Vue's transition component. In most browsers, it's possible to hide scrollbar with CSS, although not a bullet-proof solution.

.scrollbar-none {
   -ms-overflow-style: none;
   scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
   display: none;
}

Of course due to accessibility concerns in most cases the scrollbars should be enabled on transitionend, but it would be nice to have the option not re-enable them as well. Actually now to think of it, maybe just adding an option to add custom styles on transitionstart and transitionend events would be even better solution. That way the dev could choose to hide the scrollbar using the styles shown above or even add some other interesting transition effects such as transitioning the background color with the reflow etc.

Cheers!

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

No branches or pull requests

1 participant