Ionic-framework: 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 https://github.com/driftyco/ionic/pull/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?

[perrygovier]

This one is tricky since we have to determine a direction before we decide to start preventing default. Doing that smoothly can be problematic. We should address it though.

Horizontal scrolls should not break vertical scrolling.

[Ti-webdev]

@perrygovier You can apply my PR and improve the smoothness of the future.

[pm-desjonqueresg]

@perrygovier @Ti-webdev I was able to make it work as expected. My solution is to lock the scrolling to one direction at a time, horizontal or vertical, no diagonal scrolling. In the doTouchMove function, I simply calculate which move is the greatest between X and Y, and allow scrolling accordingly.

      var mX = Math.abs(moveX * self.options.speedMultiplier),
            mY = Math.abs(moveY * self.options.speedMultiplier);

      if (self.__enableScrollX && mX >= mY) {

        scrollLeft -= moveX * self.options.speedMultiplier;
        var maxScrollLeft = self.__maxScrollLeft;

        if (scrollLeft > maxScrollLeft || scrollLeft < 0) {

          // Slow down on the edges
          if (self.options.bouncing) {

            scrollLeft += (moveX / 2  * self.options.speedMultiplier);

          } else if (scrollLeft > maxScrollLeft) {

            scrollLeft = maxScrollLeft;

          } else {

            scrollLeft = 0;

          }
        }
      }

      // Compute new vertical scroll position
      if (self.__enableScrollY && mY > mX) {
         ...

[mkoosej]

@pm-desjonqueresg How do you clear out direction. I developed a similar approach but I couldn't find a better solution than using a timer to clear the direction. It also doesn't make sense to change the direction while you have tracking touches and it starts as a horizontal.

[pm-desjonqueresg]

@mkoosej This solution is very simple and is clearly a hack for now as it completely disable diagonal scrolling. But in my application I don't have a use for it, so I'm fine with it. I guess it should check for a flag to see if scrolling is locked or not. I didn't dive much into Ionic code to really understand the whole logic, I can't say if should be done like this, but it works pretty well for me. Not sure why you will need to clear out direction... :)

[afsadilson]

This bug has already been fixed? I have an ion-content with 5 ion-scroll (X direction only), so the user can't scroll down.

@bra1n's solution works, but I can't scroll down without accidentally scroll some ion-scroll to left.

BTW, @bra1n thanks for the temporary solution, you saved me =D

[manishiitg]

@bra1n
This solution doesn't work for android native scrolling.
is there any solution for that?

[ShindePrasad]

If using "ion-scroll" then just set its "Height" as per need and it its "direction" attribute as per convenience it will also work gre8.

[geekuillaume]

Is there any news on this issue ?

[jamesla]

+1

[grrrian]

+1

[martov1]

any news on this?

[dhirajb1989]

+1 .... Please include this feature

[tsurrel]

+1

[gauravsaini03-zz]

+1 @perrygovier Any updates on this :) ?

[grrrian]

is the plan to fix this in 1.2?

[salazarr-js]

+1 Please include this feature, i really need it ...

[lambrospetrou]

Do we have an update in this issue ?
It seems like a huge hack to always have to edit the ionic.bundle.js file.

[andmar8]

It's been added to the milestone 1.2:

https://github.com/driftyco/ionic/milestones/1.2?page=2&q=is%3Aopen+milestone%3A1.2

So, basically it should be fixed in 1.2.

[mlynch]

Should be fixed in c5b48cb6e36887bb1ff9daf39d33217e5bc651fd which will be in 1.2 in the new few days. Note: we are moving away from JS scrolling support, so this only works right with native scrolling which is the default in 1.2. Unfortunately, <ion-scroll> did not support native scrolling until that last commit.

Closing, please give it a try and let me know how it works!

[zhougn]

Is it a fix for native scroll only? I still have the issue if I enable the js scroll by adding overflow-scroll="false" to <ion-scroll>

I'm using ionic 1.2.1.
The demo: http://codepen.io/anon/pen/dGpzrp

[persyval]

on Ios this only seems to work when you explicitely set:
$ionicConfigProvider.scrolling.jsScrolling(false);
If you don't add it to your config section it doesn't work
although native scrolling should be default now.

[william-beange-hs]

+1

[andmar8]

I'm finding that even "with" $ionicConfigProvider.scrolling.jsScrolling(false); on ios I "still" can not scroll horizontally.... "sometimes". It's a really weird temperamental bug. I can happily scroll vertically, but whether the app will let me horizontal scroll seems to be a matter of luck. I haven't figured out yet what I'm doing that allows me to scroll horizontally "sometimes"?

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

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.