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来完成工作。

将委托处理程序分配给＆＃34; ion-content＆＃34;

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

处理滚动事件＆＃34;离子滚动＆＃34;并将方向改为x＆amp;收率

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

在Controller中处理垂直滚动事件以滚动离子内容，如下面的代码所示。您可以检查＆＃34; direction＆＃34;，参数以检查是否请求垂直滚动。如果要求垂直滚动，您可以滚动＆＃34; ion-content＆＃34;使用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(){};
    });

  }
}

在离子

3 个答案: