Skip to content

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

Open
@joosia

Description

@joosia

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions