如何防止向左/向右滑动时垂直滚动答案

【问题标题】：How to prevent vertical scroll on swipe left/right如何防止向左/向右滑动时垂直滚动
【发布时间】：2015-04-08 15:05:38
【问题描述】：

当我尝试向左/向右滑动时，我的应用内容也会垂直滚动，从而造成混乱的用户体验。有没有办法防止它？

这就是我处理滑动的方式

// angular directive
link: function(scope, element, attrs) {
        $ionicGesture.on('swiperight', function(){console.log("swiped");}, element );
}

【问题讨论】：

请检查重新制定的答案，并在可能的情况下提供反馈...
@Manube 对不起，我没有办法/时间检查这个了，我现在什至不使用 ionic，让社区处理它，有很多感兴趣的人。
好的，没问题，谢谢您的回复

标签： javascript angularjs scroll swipe ionic

【解决方案1】：

前言：在确保与 ios 和 android 环境兼容后，此解决方案被完全改写；以下 cmets 可能不再适用；欢迎任何反馈。

是的，当您水平滑动时，有一种方法可以防止应用内容滚动：通过将 angularjs tapDetector 指令与 ionic $ionicScrollDelegate 服务结合使用。

我们还需要使用非常快速的 dom 事件检测来检测滑动（mousedown/touchstart、mousemove/touchmove、mouseup/touchend）；这是必要的，因为$ionicGesture 事件侦听器会在滚动完成后检测到滑动：在 ionic 中检测滑动是为了减慢我们的目的。

tapDetector 指令被放置在 body 上，如下所示：

<body ng-controller="MyCtrl" tap-detector>

这是指令的代码：

.directive('tapDetector',function($ionicGesture,$ionicScrollDelegate){
  return{
    restrict:'EA',
    link:function(scope,element){
      var startX,startY,isDown=false;
      element.bind("mousedown touchstart", function(e){
        e=(e.touches)?e.touches[0]:e;//e.touches[0] is for ios
        startX = e.clientX;
        startY = e.clientY;
        isDown=true;
        //console.log("mousedown",startX,startY);
      });

      element.bind("mousemove touchmove", function(e){
        e=(e.touches)?e.touches[0]:e;//e.touches[0] is for ios
        if(isDown){
          var deltaX = Math.abs(e.clientX - startX);
                var deltaY = Math.abs(e.clientY - startY);

          if(deltaX > deltaY) {
          //console.log("horizontal move");
            $ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(true);
            }
        }
      });

      element.bind("mouseup touchend", function(e){
        isDown=false;
        $ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(false);
        //console.log("mouseup touchend");
      });
    }
  }
})

当你触摸屏幕（准备滑动）时，触摸的坐标被设置（startX，startY）并且isDown被设置为true。

当您开始滑动时，我们需要确定滑动是水平还是垂直。我们只对水平滑动感兴趣：

var deltaX = Math.abs(e.clientX - startX);
var deltaY = Math.abs(e.clientY - startY);

deltaX 是原始 X 和当前 X 之间的差异（增量）； deltaY 是原始 Y 和当前 Y 的差值（delta）；

if (deltaX > deltaY)

我们有一个水平滑动！

现在已经足够快地检测到滑动，剩下要做的就是动态阻止滚动：

$ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(true);

在 HTML 中：<ion-content delegate-handle="mainScroll">

滚动完成后，我们必须解冻（解冻？）滚动：

element.bind("mouseup touchend", function(e){
                    isDown=false;
                    $ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(false);
                });

这是在 iPad 2 上测试的和 Android Galaxy S4

差点忘了：这是working pen（由 sMr 提供）

【讨论】：

@sMr，因为您打开了赏金，请检查一下并告诉我它是否有效，以便我接受答案。
@Anri 我尝试了答案，但它在滑动时冻结了内容.. 所以让我们等待另一个答案，直到赏金的最后一天
@sMr 是的，我在恢复正常滚动行为之前设置了 3 秒的任意延迟；不过，它可以根据需要缩短；请指定您期望的确切行为：现在在触发滑动后会阻止垂直滚动：这不是所需的吗？
@Manube 首先我使用的是离子列表，列表中的每个离子项目都有左右滑动手势。当您在触发滑动事件之前向左或向右滑动而不是精确的水平线时，离子列表会滚动，这会在冻结之前进行一点垂直滚动
好的，我明白了。您需要在滑动之前停止滚动，否则仍然会发生一些滚动，对吗？

【解决方案2】：

目前 ionic 团队没有 API 可以做到这一点，但我临时提出了一个猴子补丁和功能请求。 https://github.com/driftyco/ionic/issues/2703

【讨论】：