我在用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有同样的问题,我可以滚动表单而不是选择。
答案 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;
。