无法垂直滚动,离子滚动方向='x'

Question

在页面的一侧,我有一些内容,在内容之后,我有一个水平滚动部分,它将水平滚动.在那部分之后,我还有其他一些内容.

问题是,如果我点击并滚动内容,那么我可以垂直滚动.但如果我点击并滚动水平滚动部分,我无法垂直滚动.ion-scroll direction=x阻止水平滚动.如果水平部分几乎占据屏幕的整个高度,则用户无法在垂直方向上滚动,这会阻止滚动.如果我删除ion-scroll并使用自定义CSS overflow-x : scroll,然后我可以通过点击水平可滚动部分垂直滚动.但这适用于浏览器,但不适用于移动设备.

请看一下代码笔

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”

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

处理“ion-scroll”上的滚动事件并将方向更改为 x 和 y。

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

在控制器中处理垂直滚动事件以滚动离子内容，如下面的代码所示。您可以检查“direction”参数来检查是否需要垂直滚动。如果需要垂直滚动，您可以使用 deledate 滚动“ion-content”

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

希望这会有所帮助