兩列離子無限滾動

Question

我在離子（1.3.1）和離子無限滾動方面遇到問題。 我有兩列，一列在右側，高度可變，而另一列在左側，無限滾動，但是兩個項目應同時滾動。 我遇到的問題是，當右列太大時，在這種情況下，我必須向下滾動到頁面底部才能在左邊有更多項。

<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>

我創建了一個顯示問題的代碼筆：

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

我的預期結果是同時滾動兩個項目，但始終在左側有項目，而不必滾動到頁面底部。

提前致謝。

Answer 1

解決此問題的方法是在右列中放置用於項目的惰性加載組件，因為我將元素隱藏在視口下方，所以頁面的底部始終位於屏幕上，允許用戶使用無限滾動而無需滾動右列中的所有項目。