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.

Answer 1

解决此问题的方法是在右列中放置用于项目的惰性加载组件，因为我将元素隐藏在视口下方，所以页面的底部始终位于屏幕上，允许用户使用无限滚动而无需滚动右列中的所有项目。