当我滚动表格元素

时间:2016-01-26 19:37:56

标签: javascript angularjs scroll ionic-framework stoppropagation

我在用angularJs制作的离子滚动元素中有2个表:

<ion-view>
     <ion-scroll class="has-header has-footer" scrollbar-y="false" direction="y">
         <div ng-controller="calendCtrl" >
            <div id="t1" class="CSSTableGenerator" >
                <table class="planner" isolateScrolling>
                     <tr ng-repeat="row in calendarData track by $index">
                        <td colspan="{{day.colspan}}" title="{{day.title}}" 
                            ng-class="day.class" 
                            ng-click="calendarCellClick($parent.$index,$index)"  
                            ng-repeat="day in row track by $index">
                             {{day.descr}}
                        </td>
                    </tr>
                </table>
            </div>

            <div id="t2" class="CSSTableGenerator" >
                <table class="planner" isolateScrolling>
                     <tr ng-repeat="row in calendarData track by $index">
                        <td colspan="{{day.colspan}}" title="{{day.title}}" 
                            ng-class="day.class" 
                            ng-click="calendarCellClick($parent.$index,$index)"  
                            ng-repeat="day in row track by $index">
                             {{day.descr}}
                        </td>
                    </tr>
                </table>
            </div>

         <div>
    </ion-scroll>
</ion-view>

这2个表真的很长,所以我需要两个溢出滚动,但我需要一个离子滚动来查看表。

在Chrome浏览器上如果我在鼠标指针位于第一个表格时滚动,我可以滚动第一个表格,但离子滚动元素也会滚动。

在Safari上,在iPad上我只能滚动离子滚动视图,但我不能对表格做同样的事情。

我该如何管理?

更新1

在Firefox&amp; Chrome上,stopPropagation指令解决了双滚动行为,但iPad上的表仍无法解析。

更新2

我在长形式的选择输入元素中滚动iPad有同样的问题,我可以滚动表单而不是选择。

1 个答案:

答案 0 :(得分:0)

Ionic 1.2修复了错误的浏览器滚动世界中的很多错误。

使用从凉亭安装的1.2.4,现在一切都工作得很好。

对我来说唯一不起作用的是属性scrollbar-y="false",它不会隐藏滚动条。

下表是css:

table.planner {
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
}

它也可以在Safari iPad2上使用overflow-y: scroll;