Per axis visibility?

[sharifzadesina]

Is your feature request related to a problem? Please describe. For better UX, I want to show the scrollbar's "track" to the user even if there is not enough content for the scrollbar to appear, so the user will know this section is scrollable.

Describe the solution you'd like We already have the option scrollbars.visibility but when I set it to visible it makes both the Y and X (!) axes visible, I can't specify I only want the Y axis (a common case) and the overflow options actually don't do anything?!

Edit: I already tried this and it doesn't work?!

{ scrollbars: { visibility: 'visible' }, overflow: { x: 'hidden' } }
{ scrollbars: { visibility: 'auto' }, overflow: { x: 'hidden' } }
{ scrollbars: { visibility: 'hidden' }, overflow: { y: 'visible-scroll' } }

[KingSora]

Good day @sharifzadesina :)

Currently the scrollbars.visibility option always affects both axis and its completely independent of the overflow option. With visibility: 'visible' / visibility: 'hidden' both axis will be always visible / hidden, with visibility: auto the axis which has an real scrollable overflow (not the overflow option) will be visibile otherwise it will be hidden.

I agree that this seems to be a bit unintuitive especially for the visible and hidden cases, thus I'm proposing the following solution to the problem: The scrollbars.visibility option will also be affected by the overflow option and will only apply when an overflow is even possible according to the overflow option.

The new behavior would look like this: Before applying the scrollbars.visibility option to a scrollbar, its first checked whether an overflow of the corresponding axis is even possible. Only if an overflow is possible (overflow option 'scroll' or 'visibile-scroll') the visibility will be applied. If a visibility is not applied the scrollbar will be hidden per default.

This would remove the possibility to show the scrollbars even if the overflow option is 'hidden' or 'visible-hidden', but I believe that this possibility anyways results in bad UX since showing an scrollbar even though it will never be working is not what people should do.

Lets go through some options to illustrate before and after results:

Before:

{ overflow: { x: 'hidden', y: 'scroll' }, scrollbars: { visibility: 'visible' } } // both axis always visible
{ overflow: { x: 'hidden', y: 'scroll' }, scrollbars: { visibility: 'hidden' } } // both axis always hidden
{ overflow: { x: 'hidden', y: 'scroll' }, scrollbars: { visibility: 'auto' } } // x-axis: always hidden, y-axis: visible when overflow

{ overflow: { x: 'hidden', y: 'hidden' }, scrollbars: { visibility: 'visible' } } // both axis always visible

After:

{ overflow: { x: 'hidden', y: 'scroll' }, scrollbars: { visibility: 'visible' } } // x-axis: always hidden, y-axis: always visible
{ overflow: { x: 'hidden', y: 'scroll' }, scrollbars: { visibility: 'hidden' } } // both axis always hidden
{ overflow: { x: 'hidden', y: 'scroll' }, scrollbars: { visibility: 'auto' } } // x-axis: always hidden, y-axis: visible when overflow

{ overflow: { x: 'hidden', y: 'hidden' }, scrollbars: { visibility: 'visible' } } // both axis always hidden

Do you think this solution would improve the behavior of the scrollbars.visibility option?

[sharifzadesina]

@KingSora First of all, Thank you for your great work, this library really helped me a lot (all other libs are really old and not maintained anymore). I think it would be better to control the visibility and scroll behavior just like the CSS itself, at first I thought the overflow option was the enhanced version of CSS's overflow property, and I am going to be able to control the visibility of the scroll bar using it. but the decision is already made and I don't think a breaking change like this is feasible for now. but it would be a lot simpler and less confusing to just deprecate the scrollbars.visibility option and only continue with overflow option and make it behave like the CSS overflow property. Other than this, I think the solution you provided does the job well enough.

[sharifzadesina]

Any update on this? If you have any recommendations, I can send a PR.

[KingSora]

@sharifzadesina sorry, life is busy atm... I'll try to release a new version this weekend :)

[KingSora]

@sharifzadesina I've published overlayscrollbars v2.6.0 which contains the mentioned changes. Please try it out and give feedback :)

[sharifzadesina]

@KingSora Thank you, everything seems fine.