gpt4 book ai didi

angularjs - ionic 卷轴 : Prevent translate3d on parent element

转载 作者:行者123 更新时间:2023-11-28 06:26:13 24 4
gpt4 key购买 nike

我的 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> 的功能元素

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

最佳答案

傻我。事实证明这很容易解决。我只需要添加 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">
...

关于angularjs - ionic 卷轴 : Prevent translate3d on parent element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35270259/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com