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

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>

You can use $ionicScrollDelegate to achieve your job.

assign delegate handler to "ion-content"

<ion-content delegate-handle="mainScroll">

handle scroll event on "ion-scroll" and change the direction to x & y.

<ion-scroll id="ionScrollRegion" direction="xy" on-scroll="vscroll(this.direction)">

And in Controller handle the vertical scroll event to scroll ion-content like given in code below. You can check "direction", parameter to check if vertical scroll is requested. If vertical scroll is requested you can scroll "ion-content" using deledate

$scope.vscroll = function(direction){
  alert(direction);
  //check if vertical scroll requested using direction parameter, if yes execute below line
  $ionicScrollDelegate.$getByHandle('mainScroll').scrollBottom();
}

Hope this will help

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.