Ionic-framework: bug: ion-content has always a vertical scroller

Created on 2 Apr 2016 · 13Comments · Source: ionic-team/ionic-framework

Type: bug

Ionic Version: 2.x beta.3

Platform: all

<ion-content> always contains <scroll-content> which has

scroll-content {
  overflow-y: scroll;
}

so the vertical scrollbar is always visible in ion-content.

Suggesttion:

Should be better to set overflow-y to 'auto'
Scrollbars of <ion-content> should be configurable as in ionic1

Source

mpaland

👍5

Most helpful comment

@cesar-oyarzun-m As a workaround you could add the following in the application's app.core.scss:

scroll-content {
    overflow-y: auto !important;
}

iignatov on 8 Apr 2016

👍3

All 13 comments

+1, is there a reason for it being 'scroll' instead of 'auto'?

ghost on 4 Apr 2016

👍3

hi @mpaland I have the same problem I see vertical scroll in all my screens, do you have a work around?

cesar-oyarzun-m on 7 Apr 2016

@cesar-oyarzun-m As a workaround you could add the following in the application's app.core.scss:

scroll-content {
    overflow-y: auto !important;
}

iignatov on 8 Apr 2016

👍3

yeah I did that thanks!!

cesar-oyarzun-m on 8 Apr 2016

@iignatov what about just set
overflow-y: hidden;

What potential problem can that cause?

GitGump on 12 May 2016

@GitGump I haven't tried it, but I guess that the content will be clipped, i.e. when the content is higher than the screen the overflowing part won't be displayed - _does this sound like a problem?_ :wink:

iignatov on 13 May 2016

@iignatov Hey, buddy, that's the thing, I've tried it on emulators, turned out that the overflowing part wouldn't be displayed just like you said and the screen couldn't scroll either.

GitGump on 16 May 2016

You can override the CSS to use auto if you wish, but you look momentum scrolling on devices: https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

adamdbradley on 23 Jun 2016

@adamdbradley
What about a platform specific configuration in this case:

.content .scroll-content {
    overflow-y: auto;
}
.content-ios .scroll-content {
    overflow-y: scroll;
}

So set always to scroll only for ios platform, because as far I can see it's only ios relevant.

palsch on 13 Feb 2017

I just create a pull request #10431 to set the overflow-y to auto only on desktop platform device.

5im0n on 15 Feb 2017

The bug is still affecting update 3.18.0. Was not it corrected?

nemexyz on 19 Nov 2017

imp
i want to implement this type of scrool bar in my ionic app ho to do it

Tulika12 on 24 Jan 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.