Overflow-scroll ion-content

ionic-v1
1

Hi,

when you set the property overflow-scroll to true in ion-content, the overflow-y property of the scroll-content

should be set to “auto” (not “scroll”). Like this the scroll-content
take the full width even if the scroll-bar is not active.
2

Are you asking why the overflow property is set to:

overflow-y:scroll

and not?

overflow:auto;
3

sorry, yes! It is what I meant

4

Alright, just checking.

By setting overflow-y:scroll, they can then add this property to mimic the momentum scroll on iOS devices.

 -webkit-overflow-scrolling: touch;

But the only thing about this is that you need to use overflow-y: scroll or else it won’t work. There’s a small article on CSS Tricks about this .

5

ok, but I miss something. The property overflow-scroll was set to use native scroll (Useful if the application must run in a web browser). With such a feature enabled, the UI containing a small list (without overflow) is forced to keep a small unused row…

6

I’m afraid I don’t quite understand? Is there a codepen or plunker that you can show me?

7

sure here is a codeopen

8

Hmm Im afraid I still don’t get what you mean, even after the codepen, I’m not seeing a unused row. I really wish I could help but I don’t know what the problem is

9

I’m talking about the scroll row of the “scroll-content” div : where the scroll bar is supposed to be when the list is long enough and which is empty if the list is short (due to overflow-y=scroll).

10

This is the scrollbar. Mobile devices usually fade the scrollbar so you will only see it in the desktop browser.

11

Right ! It will disappear in mobiles. Any tips to add the CSS property overflow-y:auto conditionally (if we are in a desktop browser)?

12

There have been reports that overflow: auto now works as expected with -webkit-overflow-scroll: touch, and if that’s confirmed that overflow-y should be set to auto.

I’ve brought this up because I’ve seen the scrollbar visible on Android when there is no content to scroll. As soon as I update the list to be higher than the overflow container, the scrollbar disappears. I had to apply one of either to fix it:

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

or

::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none;
}

I’ve tested this (both the issue and the solution) on MotoG@4.4.2, Nexus4@4.4.2, Galaxy Nexus@4.3 and ChromeRipple@34.

2 Likes
13

Any news on this one? Maybe the hotfix I suggested should be applied if platform is android if that overflow-y: scroll serves only iOS momentum emulation.

14

+1, interested in any news as the issue still exists today with ionic 1.3.1 and Android 6+ (scrollbars are sometimes visible when they shouldn’t)

1 Like