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.

Answer 2

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

Answer 3

A bit of a hack, but you can just prevent the preventDefault from being called (you can always save it as something else if you need it later).

Add the following as a directive of the scroll view.

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(){};
    });

  }
}