Ionic 2 Scrollable Div within ion-content

Ionic Framework ionic-v3
1

I’m trying to make only a portion of the on my app’s page scrollable. A simplified version of my page’s content is as follows:

<ion-content>
       <div>
            <h1>This stuff should not scroll.</h1>
       </div>

	<div *ngFor="let boy in boys">
            <h3>This stuff should scroll.</h3>
	</div>
</ion-content>

How do I make sure that only content within the second div scrolls? I’ve tried wrapping it within but that doesn’t seem to work. Any help would be appreciated.

2 Likes
2

I found my mistake, but I would still like to get a couple things cleared up. Here is the fix:

<ion-content style="overflow-y: hidden;">
    <div>
        <h1>This stuff should not scroll.</h1>
    </div>

    <ion-scroll scrollY="true" style="width: 100%; height: 100%;">
	<div *ngFor="let boy in boys">
            <h3>This stuff should scroll.</h3>
	</div>
    </ion-scroll>
</ion-content>

This allows me to scroll through only the div at the bottom, exactly what I wanted. However, the height attribute for the ion-scroll confuses me. I thought 100% would allow all the content to be scrolled, but this is not the case - some content is still hidden and not displayed. I played around with ‘height’, and at about 60%, I am able to view all the content. However, at this point, I see a different amounts of the scrollable content displayed on different screen sizes. Can someone explain how the height attribute works for ion-scroll? And should this be something I define using vh? Thanks.

3 Likes
3

Can anyone please explain how the height property works with ion-scroll and how to make sure that all my scrollable content is displayed regardless of screen size? Thanks.

4

I just wanted to say thanks, because your solution is the only one that actually did what I needed to do! And I don’t even have the problem of content disappearing, which is nice. <ion-scroll> works perfectly :slight_smile:

5

And also worked for me.