Ionic Infinite scroll with two columns

Question

I'm having an issue with Ionic (1.3.1) and ion-infinite-scroll. I have two columns, one at the right with a variable height and another at the left with the infinite scroll, but both items should scroll at the same time. The problem I have, is when the right column is too large, in that case I have to scroll down to the bottom of the page to have more items at the left.

<div class="row" >

    <div class="col col-50">
        <ion-list>
            <ion-item ng-repeat="item in items" item="item" href="#/item/{{item.id}}">
                Item {{ item.id }}
            </ion-item>
        </ion-list>
        <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%" style="height:100%;"></ion-infinite-scroll>
     </div>

     <div class="col col-50">
         Very large column with variable height
     </div>
 </div>

I created a codepen showing the issue:

http://codepen.io/charlieme/pen/ybPBbQ

My expected result is to scroll both items at the same time, but always having items at the left, without having to scroll to the bottom of the page.

Thanks in advance.

charlieme charlieme · Accepted Answer · 2017-05-11T11:42:01

What I did to solve this issue was to put a lazy load component for the items in the right column, I'm hiding the elements below the viewport, so the bottom of the page will be always on the screen allowing the user to use the infinite scroll without having the scroll all the items in the right column.

Ionic Infinite scroll with two columns

1 Answers