guanzo / vue-smooth-reflow

Transition an elements reflow when the data changes.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Suggestion: Hide scrollbar with CSS instead of overflow-property

joosia opened this issue Β· comments

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!