stopPropagation on ion-scroll when i scroll on the table element

Question

I have 2 table inside a ion-scroll element made with angularJs:

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

This 2 tables are realy long so i need an overflow scroll for both, but i need a ion-scroll to see both the table.

On Chrome Browser if i scroll when my mouse pointer is on the first table, i can scroll the first table but the ion-scroll element scroll too.

On safari, on the iPad i can scroll only the ion-scroll view but i can't do the same with the tables.

How can i manage that?

UPDATE 1

On a Firefox&Chrome a stopPropagation directive solve the double scroll behavior, but the table on iPad still unscrollable.

UPDATE 2

I have the same problem with the iPad scroll in a select input element on a long form, where i can scroll the form but not the select.

Are you using some Angular module for table? Could you share some more pieces of code? — vp-platform, Jan 27 '16 at 10:41
what's the `isolateScrolling` directive in your tables? And can you share a sample for calendarData? — vp-platform, Jan 27 '16 at 10:52

score 0 · Answer 1 · answered Jan 27 '16 at 16:14

Ionic 1.2 have fixed a lot of bug on the buggy browser scroll world.

Using 1.2.4 installed from bower, everything now work how aspected.

The only things that doesn't work to me, is the attribute scrollbar-y="false" that not hide the scrollbar.

What follow is the css of the table:

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

It works on Safari iPad2 with overflow-y: scroll; too.

stopPropagation on ion-scroll when i scroll on the table element

1 Answers1