Cannot scroll vertically with ionic scroll direction = 'x' in ionic

Question

On the side of the page, I have content, and after the content, I have a horizontally scrollable section that will scroll horizontally. After this section, I have other content.

The problem is that if I click and scroll through the contents, then I can scroll vertically. But if I click and scroll in the horizontal scroll section, I cannot scroll vertically. ion-scroll direction=xblocks horizontal scrolling. If the horizontal section occupies almost the entire height of the screen, the user cannot scroll in the vertical direction, which blocks the scroll. If I remove ion-scrolland use custom css overflow-x : scroll, then I can scroll vertically by clicking on the horizontal scroll section. But it works in a browser, but not in a mobile phone.

Please look at the code handle.

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

@Yasser B, . , .

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

HTML

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

- , .

Answer 2

$ionicScrollDelegate .

" "

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

" " x y.

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

, . "", , , . , " " deledate

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

,

Answer 3

, preventDefault ( - , ).

:

function horizontalScrollFix() {

  var directive = {
    link: link,
    restrict: 'A'
  };
  return directive;

  function link(scope, element, attrs) {

    element.children().on('mousedown touchstart', function(event){
      event.preventDefault = function(){};
    });

  }
}

Hide result