Ionic / AngularJS - 将垂直滚动事件推迟到父元素答案

【问题标题】：Ionic / AngularJS - defer vertical scroll event to parent elementIonic / AngularJS - 将垂直滚动事件推迟到父元素
【发布时间】：2016-07-26 23:54:41
【问题描述】：

我有这样的内容：

<ion-content delegate-handle="mainScroll">
  <ion-scroll delegate-handle="horizontalScroll" direction="x">
  </ion-scroll>
  <ion-scroll delegate-handle="horizontalScroll" direction="x">
  </ion-scroll>
  <ion-scroll delegate-handle="horizontalScroll" direction="x">
  </ion-scroll>
</ion-content>

基本上我想要的是垂直滚动的父容器（离子内容）内的多个水平滚动条（离子滚动）。问题是试图抓住水平滚动条并垂直拖动它是行不通的，所以我需要以某种方式将该事件推迟到父级。

我看到了委托函数：

<ion-scroll delegate-handle="horizontalScroll" direction="x" on-scroll="delegateScroll()">
</ion-scroll>

$scope.delegateScroll = function() {
  // what do I do here?
}

但我不确定如何获取该事件并使用它做一些有用的事情。帮忙？

【问题讨论】：

一般来说，触发 DOM 事件的角度指令将通过 $event 公开事件。我会先试试看是否存在。然后你应该能够调用 $event.preventDefault() 或其他东西，然后将其传递给父级。

标签： angularjs ionic-framework

【解决方案1】：

解决了我自己的问题。它比我想象的要复杂得多，但它确实有效。请参阅下面的代码笔。

http://codepen.io/anon/pen/BoGkA

angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope, $ionicScrollDelegate, $timeout) {
  $timeout(function(){
    return false; // <--- comment this to "fix" the problem
    var sv = $ionicScrollDelegate.$getByHandle('horizontal').getScrollView();

    var container = sv.__container;

    var originaltouchStart = sv.touchStart;
    var originalmouseDown = sv.mouseDown;
    var originaltouchMove = sv.touchMove;
    var originalmouseMove = sv.mouseMove;

    container.removeEventListener('touchstart', sv.touchStart);
    container.removeEventListener('mousedown', sv.mouseDown);
    document.removeEventListener('touchmove', sv.touchMove);
    document.removeEventListener('mousemove', sv.mousemove);


    sv.touchStart = function(e) {
      e.preventDefault = function(){}
      originaltouchStart.apply(sv, [e]);
    }

    sv.touchMove = function(e) {
      e.preventDefault = function(){}
      originaltouchMove.apply(sv, [e]);
    }

    sv.mouseDown = function(e) {
      e.preventDefault = function(){}
      originalmouseDown.apply(sv, [e]);
    }

    sv.mouseMove = function(e) {
      e.preventDefault = function(){}
      originalmouseMove.apply(sv, [e]);
    }

    container.addEventListener("touchstart", sv.touchStart, false);
    container.addEventListener("mousedown", sv.mouseDown, false);
    document.addEventListener("touchmove", sv.touchMove, false);
    document.addEventListener("mousemove", sv.mouseMove, false);
  });
});

【讨论】：