Show scrollbar just when it's necessary


#1

Hello
I hide the default scrollbar that is present in sideMenu projects.
the problem now is that when I place objects in a component and these objects overflow, the scrollbar does not appear.
I would like to know how to make appear scrollbar only when it is necessary?


#2

Sorry this isn’t going to help you, but can you tell me how you hid the scrollbar?


#3

You need to add CSS property overflow-y: auto or overflow: auto instead hidden/scroll.
So, in side menu project it would apply on ion-menu .scroll-content as below -

ion-menu .scroll-content{
    overflow-y: auto; // or "overflow: auto;"
}

#4

In your case overflow: hidden will work if you don’t want any thing to scroll.
If you want to hide the scroll bar(when not needed) and to enable it when content’s height requires scrolling, look at my previour comment.


#5

Thank you! Do you know how to hide the scrollbar on regular pages as well? I tried :

 ion-content .scroll-content {
    overflow : hidden;
 }

but it didn’t work


#6

Have you added it inside *.scss file of that specific page?
Also, try adding !important.

ion-content .scroll-content {
    overflow : hidden !important;
}