byr1al February 2016

ionic scroll: Prevent translate3d on parent element

I have template in my ionic app that looks something like this:

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

the div with the class 'nav' contains two buttons that let the user switch between two months. The months are in the <ion-scroll> element.

This works as it should. The buttons scroll the <ion-scrol> element horizontally. But every time the buttons are used, the entire <ion-view> is scrolled vertically down by 20px - thus hiding the buttons.

I've tried changing the <ion-scroll>s inline css (with angular.element) to not include 3d transforms, but they just get re-added.

This is the function that gets called upon click - and my attempt to prevent the transform3d on the parent element

$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);
};

EDIT: I've also tried using event.stopPropagation - this breaks the functionality of the <ion-scroll> element

Ca

Answers


byr1al February 2016

Silly me. It turns out this was very simple to solve. I simply just needed to add scroll="false" to the <ion-content> element. No additional controller logic was needed.

So the html code above now looks like this:

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

Post Status

Asked in February 2016
Viewed 3,442 times
Voted 5
Answered 1 times

Search




Leave an answer