Ionic-framework: bug: Unable to scroll horizontally with ion-scroll

[romain030992]

Type: bug

Ionic Version: 1.x

Platform: android 5.0 webview

Hello,

I try to upgrade the ionic version to the latest stable version (1.2.3) on my application. In the main page I have a ion-content which scroll vertically and a ion-scroll which scroll horizontally in it. This ion-scroll contains a list of items. Here is a snippet of the code :

<ion-content scroll="true">
    <ion-scroll direction="x">
          <div ng-repeat="item in items track by item.id">
                ...
           </div>
      </ion-scroll>
</ion-content>

The aim is to have be able to scroll these two parts from anywhere in the page. I mean that for example, we have to be able to scroll down even if we start to scroll from the horizontally-scrollable area.

Previously, I had the 1.1.0 version and needed to patch the ionic.bundle in order to make it work (according to this link https://github.com/driftyco/ionic/issues/2501) but it does not work anymore...

There is an other similar issue here https://forum.ionicframework.com/t/when-using-horizontal-scroll-ion-scroll-page-cant-be-scrolled-down-in-y-direction/3833/57. I already tried every fixes but it does not work...

Did I miss something or is it a bug ? If it is, is there any workaround I did not already try?

Thank you.

Romain

PS : it works well on iOS (withous any patch)

[vianneyniji]

+1

[persyval]

• 1

[khw828]

+1

[erkkimon]

+1

[venkatesh22]

+1

[bdirito]

also in v2 (2.0.0-beta.35)

[royipressburger]

+1

[bdirito]

Found a possible workaround. Looks like <ion-scroll> uses native scrolling by default. But you can also use overflow-scroll=false to use js scrolling. This option is documented for <ion-content> however it also works here on <ion-scroll> (where it is not documented).

No idea if that's an oversight on the documentation or something that might be removed at will.

[nickmarca]

@bdirito It doesnt work ! I think people are being consufed with this example http://codepen.io/anon/pen/dGpzrp. If you enter in this page and then open developer tools in Mobile Mode, for some reason the vertical scroll works over the horizontal scroll element, however if you update the page while in Mobile Mode It doesn't work anymore. So just putting overflow-scroll="false" won't fix the problem. What did the trick for me was that code: http://codepen.io/rajeshwarpatlolla/pen/xGWBja. This problem has been reported since 2014 as we can see at this Ionic Forum post: https://forum.ionicframework.com/t/when-using-horizontal-scroll-ion-scroll-page-cant-be-scrolled-down-in-y-direction/3833/66.

[chfight]

@nickmarca The example not work with new releases of ionic (1.3.1).

[sarahsga]

@bdirito adding overflow-scroll="false" to instead of works for me. Thanks!

[jgw96]

This issue was moved to driftyco/ionic-v1#193

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