Feature request: introduce setting to allow vertical scroll from a child scroll to affect parent

[bra1n]

Hi,

in issue #1462 there was a feature request to allow "bubbling" of scroll events from a child container to its parent container. Let's look at an example:

<ion-content>
  Here be lots of text
  <ion-scroll direction="x">
    Here be a really long line of text, to allow horizontal scrolling...
  </ion-scroll>
  Here be even more text and some dragons.
</ion-content>

Demo: http://codepen.io/anon/pen/BoGkA

Scrolling the ion-scroll horizontally works fine, but as soon as you (accidentally) start your touchDown/mouseDown inside the ion-scroll, you will no longer be able to vertically scroll the ion-content. Sometimes, you have a screen with a really big horizontal scroll element that also needs to be vertically scrollable, which will make scrolling that screen up and down really difficulty, since you mustn't start your scroll motion inside the horizontal scrolling element. In the aforementioned ticket, the cause for this was found in tap.js Line 154. If I remove the (e.defaultPrevented) condition, I'm able to scroll both the child and the parent at the same time. Since this doesn't seem to cause any other behaviour problems (I tested it on native Android, iOS browser, desktop browser), it would be great if this specific condition could be turned into a flag that I could set either on the general Ionic Framework or (even better) on each child scroll container.
What do you think?

Example: <ion-scroll direction="x" scroll-outside="true">

[sshakeel]

There is a temporary fix for this according to @bra1n

For some reason, the only way to fix it there was to monkey-patch a line in the ionic.bundle.js:

ignoreScrollStart: function(e) {
return //(e.defaultPrevented) || // <-- comment out this first condition to have scroll events bubble up

[85lele]

+1

[Ti-webdev]

if comment e.preventDefault() here: https://github.com/driftyco/ionic/blob/b69cad8b845596fdd162a4910fb73e239505760b/js/views/scrollView.js#L732
and here: https://github.com/driftyco/ionic/blob/b69cad8b845596fdd162a4910fb73e239505760b/js/views/scrollView.js#L822

Then two scroll work fine.

But need add check: has ancestor node scroll with different direction.

[bra1n]

@Ti-webdev I also tried that fix, however it seems to not be compatible with the native Android app. Scrolling stopped working there altogether for me, if I applied that fix.

[Ti-webdev]

@bra1n My way work with native Android app.

[Ti-webdev]

On emulator does not work too :(

[pm-desjonqueresg]

I'm having trouble with Android too.

I have a list of horizontally scrollable divs inside a vertically scrollable content container. It works fine in the browser with Ti-webdev's fix, I can scroll in both directions and the scroll event bubbles correctly.

But on the Android device (4.4.4), the divs only scroll horizontally when I swipe vertically on them! They don't pick up the horizontal swipe gesture.
I use the side menu template and I wonder if this can be the source of the confusion as it is listening for the swipe left to right event.

Are you guys having this issue too ?

[Ti-webdev]

Try #2606

[pm-desjonqueresg]

@Ti-webdev Thanks, It works!

I had to copy paste the code you added in the ionScroll directive (adding scroll-x|y classes) to ionContent to make it work in my case (ion-content is my parent scroll container).

[andmar8]

Plunker at bottom of this comment demonstrating the "monkey patch" solution

http://forum.ionicframework.com/t/when-using-horizontal-scroll-ion-scroll-page-cant-be-scrolled-down-in-y-direction/3833/22?u=andmar8

[marcelrassinger]

Unfortunately I run into the same issue. It would be helpful to know whether you plan to fix this issue in the near feature. If so, until when do you think you are going to release the fix?