Question

我的离子应用程序中有模板，看起来像这样：

<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">
...

div与班级＆＃39; nav＆＃39;包含两个按钮，让用户在两个月之间切换。月份位于<ion-scroll>元素中。

这样可行。按钮水平滚动<ion-scrol>元素。但每次使用这些按钮时，整个<ion-view>会垂直向下滚动20px - 从而隐藏按钮。

我尝试更改<ion-scroll>内联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>元素。不需要额外的控制器逻辑。

所以上面的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">
...

离子滚动：防止父元素上的translate3d

1 个答案: