angularjs - ionic 卷轴 : Prevent translate3d on parent element

Question

我的 ionic 应用程序中有一个看起来像这样的模板:

<ion-view>
<ion-content>
    <div class="nav">
        <span class="ion-chevron-left" ng-click="goToMonth('thisMonth', $event)"></span>
        <span>{{ monthName }}</span>
        <span class="ion-chevron-right" ng-click="goToMonth('nextMonth', $event)"></span>
    </div>
    <ion-scroll on-scroll="onScroll()" class="wide-as-needed" delegate-handle="calendarScroll" direction="x" paging="true" scrollbar-x="false" style="min-height: 215px" ng-style="scrollStyle">
...

类为“nav”的 div 包含两个按钮，让用户可以在两个月之间切换。月份在 <ion-scroll> 中元素。

这可以正常工作。按钮滚动 <ion-scrol>元素水平。但是每次使用按钮时，整个 <ion-view>垂直向下滚动 20 像素 - 从而隐藏按钮。

我试过更改 <ion-scroll> s 内联 css(使用 angular.element )不包括 3d 变换，但它们只是被重新添加。

这是点击时调用的函数 - 我试图阻止 transform3d在父元素上

$scope.goToMonth = function(id, event){
    $location.hash(id);
    if(id == 'thisMonth'){
        $scope.monthName = monthLabels[thisMonth];
    }
    else{
        $scope.monthName = monthLabels[nextMonth];
    }

    var elm = angular.element(document.querySelector('.nav'));
    var parent = angular.element(elm.parent());
    console.log(parent[0].style.transform);

    parent[0].style.transform = 'none';

    $ionicScrollDelegate.anchorScroll(true);
};

编辑:我也试过使用 event.stopPropagation - 这破坏了 <ion-scroll> 的功能元素

谁能告诉我如何防止这种行为？

Answer 1

傻我。事实证明这很容易解决。我只需要添加 scroll="false"到 <ion-content>元素。不需要额外的 Controller 逻辑。

所以上面的 html 代码现在看起来是这样的:

<ion-view>
<ion-content scroll="false">// <-- Here I altered the html
<div class="nav">
    <span class="ion-chevron-left" ng-click="goToMonth('thisMonth', $event)"></span>
    <span>{{ monthName }}</span>
    <span class="ion-chevron-right" ng-click="goToMonth('nextMonth', $event)"></span>
</div>
<ion-scroll on-scroll="onScroll()" class="wide-as-needed" delegate-handle="calendarScroll" direction="x" paging="true" scrollbar-x="false" style="min-height: 215px" ng-style="scrollStyle">
...