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

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

[william-beange-hs]

@andmar8 I am having the same problem. Parent vertical scrolling is not working from within child element with horizontal scrolling. I’ve prototyped what I’m trying to achieve here: http://play.ionic.io/app/11a919492a31 You can see the error when trying to scroll down the page from the child lists.

[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