Unable to scroll vertically with ion-scroll direction='x' in ionic

Question

In side a page i have some content and after the content, i have a horizontally scrollable section, which will scroll horizontally. After that section, i have some other content.

The issue is, if i tap and scroll on the content, then i am able to scroll vertically. But if i tap and scroll on the horizontal scrolling section, i am unable to scroll vertically. ion-scroll direction=x is blocking the horizontal scroll. If the horizontal section takes almost full height of the screen, then the user is unable to scroll in vertical direction, which is blocking the scroll. If i remove ion-scroll and use custom css overflow-x : scroll, then i am able to scroll vertically by tapping on the horizontally scrollable section. But this is working in browser, but not in the mobile.

Please have a look at the code pen

http://codepen.io/rajeshwarpatlolla/pen/MwQaqB

HTML

<ion-content>
  <h1>heading</h1>
  <h1>heading</h1>
    <ion-scroll id="ionScrollRegion" direction="x">
      <div id="content">
        <div class="item" ng-repeat="item in items">{{item.data}}</div>
      </div>
    </ion-scroll>
  <h1>heading</h1>
  <h1>heading</h1>
</ion-content>

Answer 1

Yes @Yasser B, i found a solution. Please have a look at the below link.

http://codepen.io/rajeshwarpatlolla/pen/xGWBja

HTML

<ion-scroll direction="x" zooming="false" delegate-handle="horizontal" horizontal-scroll-fix="mainScroll">
    //content
</ion-scroll>

If you have any queries, please let me know.