Splitting <ion-view> into frames

Question

So currently the blue frame content is <ion-tabs>, and the green and orange frames are unseperated and hosted inside <ion-view><ion-content>; How can I seperate them into two different frames, so scrolling on either of them won't affect the other?

Answer 1

One solution is, you can use two <ion-scroll> inside <ion-content> like:

<ion-view>
  <ion-content>
     <ion-scroll direction="xy" style="width:100%;height:30%;">
       <Map></Map>
     </ion-scroll>
     <ion-scroll direction="y" style="width:100%;height:70%;">
        <ion-list>
            <ion-item>
            </ion-item>
        </ion-list>
     </ion-scroll>
  </ion-content>

</ion-view>

Here, you need to set height of ion-scroll and its content to work it properly.