ionic Angularjs 产生简单的列表滚动区域

通过嵌套一个Y轴的滚动区域，实现X轴滚动时，栏位跟着滚动

Y轴滚动时，栏位不向上滚动

缺点：只能通过拖动栏位名实现X轴的滚动

<ion-scroll zooming="true" direction="x" style="width:99%; " has-bouncing="false">
    <div class="row">
        <!--单身的明细-->
        <div class="col col-100 energized" style="width: 99%;" >

            <!--单头栏位名-->
            <div class="row" style="height:28px;background-color: #666666;padding-top: 0px;border-radius: 5px;width: 580px;
        height:28px;color: #ffffff;">
                <div  style="padding-top: 0px;width:160px">品号</div>
                <div  style="padding-top: 0px;width:160px">名称</div>
                <div  style="padding-top: 0px;width:50px">需求</div>
                <div  style="padding-top: 0px;width:50px">已转</div>
                <div  style="padding-top: 0px;width:50px">已选</div>
                <div  style="padding-top: 0px;width:140px">目标仓</div>
                <div  style="padding-top: 0px;width:110px ">目标储位</div>
                <div  style="padding-top: 0px;width:110px ">目标架位</div>
            </div>
            <ion-scroll zooming="true" id="test2"  direction="y" ng-style="grid_height" style="width: 580px; " has-bouncing="true">
                <!--单身的具体明细   -->
                <div class="row" ng-repeat="item in items" style="width: 580px;padding-top: 5px;">
                    <div  ng-hide="true">{{item.TRANSFER_DOC_D_ID}}</div><!--单身明细的key值-->
                    <div style="width:160px">{{item.ITEM_CODE}}</div>
                    <div style="width:160px">{{item.ITEM_DESCRIPTION}}</div>
                    <div  style="width:50px">{{item.BUSINESS_QTY}}</div>
                    <div  style="width:50px">{{item.ACTUAL_TRANS_QTY}}</div>
                    <div  style="width:50px">{{item.SELECTED_QTY}}</div>
                    <div  style="width:140px">{{item.TO_WAREHOUSE_NAME}}</div>
                    <div  ng-hide="true">{{item.TO_WAREHOUSE_ID}}</div>
                    <div  style="width:110px">{{item.TO_BIN_NAME}}</div>
                    <div  ng-hide="true">{{item.TO_BIN_ID}}</div>
                    <div  style="width:110px">{{item.TO_SUB_INV_CODE}}</div>
                </div>
            </ion-scroll>
        </div>

        <!--扫描内容的影藏区域-->
        <div class="row" ng-repeat="pitem in picked_items" style="display: none" >
            <div class="col" >{{pitem.STK_ID}}</div>
            <div class="col" >{{pitem.MO_D_ID}}</div>
            <div class="col">{{pitem.ITEM_CODE}}</div>
            <div class="col">{{pitem.QTY}}</div>
            <div class="col">{{pitem.LOCATOR_CODE}}</div>
        </div>
        <!--</div>-->
    </div>
</ion-scroll>