$ionicScrollDelegate not working in ion-side-menus

ionic-v1
1

I am currently working on $ionicScrollDelegate in my mobile app. My objectives is when the user click the header bar, it will scroll to top automatically.The problem I have right now is when I included the ion-side-menu in my code, the $ionicScrollDelegate wont scroll back, I created a button which it returns their position. I am trying to figure out why $ionicScrollDelegate cannot scroll back to top when I included the side menu but when I removed the side menu, the $ionicScrollDelegate seems to work fine and it can scroll back to top.

Working code - without ion-side-menu




                <h1 class="title">Details </h1>
            </ion-header-bar>
            <ion-content delegate-handle="mainContent" ng-controller="detailCtrl">
                <a href="#" ng-click="loadMore(data)">Load More</a>
                <ion-list can-swipe="listCanSwipe">

                    <ion-item ng-repeat="data in tempData |limitTo: limit"
                              item="data"
                              href="#/expenseDetail/{{data.id}}"
                              class="item-remove-animate">

                        Date:{{data.modifiedDate | date: "yyyy-MM-dd"}}<br />

                        <ion-option-button class="button-assertive"
                                           ng-click="showPopup(data)">
                            Delete
                        </ion-option-button>
                        <ion-option-button class="button-calm"
                                           ng-click="edit(data)"
                                           ng-disabled="data.status!= 'Draft'">
                            Edit
                        </ion-option-button>

                    </ion-item>

                </ion-list>
                <button class="button button-icon ion-android-arrow-up" ng-click="scrollListToTop()">Scroll Top</button>
            </ion-content>

Not working - With ion-side-menus

            <h1 class="title">Expenses Details</h1>

            <a class="button button-icon ion-plus-round" href="#/addExpensesForm"></a>

        </ion-header-bar>
        <ion-content delegate-handle="mainContent" ng-controller="detailCtrl">
            <a href="#" ng-click="loadMore(data)">Load More</a>
            <ion-list can-swipe="listCanSwipe">

                <ion-item ng-repeat="data in tempData |limitTo: limit"
                          item="data"
                          href="#/expenseDetail/{{data.id}}"
                          class="item-remove-animate">


                    Date:{{data.modifiedDate | date: "yyyy-MM-dd"}}<br />
             <ion-option-button class="button-assertive"
                                       ng-click="showPopup(data)">
                        Delete
                    </ion-option-button>
                    <ion-option-button class="button-calm"
                                       ng-click="edit(data)"
                                       ng-disabled="data.status!= 'Draft'">
                        Edit
                    </ion-option-button>
                </ion-item>
            </ion-list>
            <button class="button button-icon ion-android-arrow-up" ng-click="scrollListToTop()">Scroll Top</button>
        </ion-content>
    </ion-side-menu-content>

    <ion-side-menu side="left">
        <header class="bar bar-header bar-assertive">
            <h1 class="title">Menu</h1>
        </header>
        <ion-list>
            <ul class="list">
                <a ui-sref="tabs.home" class="item">Home</a>
                <a ui-sref="about" class="item">About</a>
                <a ui-sref="tabs.setting" class="item">Settings</a>
            </ul>
    </ion-side-menu>
</ion-side-menus>

In my controller, I have:

$scope.scrollListToTop = function () {
        var result = $ionicScrollDelegate.$getByHandle('mainContent').getScrollPosition();
        alert('Result:' + result.top + " " + result.left);
    }
2

What does $ionic info return?

E.g.:

Your system information:

Cordova CLI: 5.1.1
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.0
Ionic CLI Version: 1.6.1
Ionic App Lib Version: 0.3.3
ios-deploy version: 1.7.0 
ios-sim version: 3.1.1 
OS: Mac OS X Yosemite
Node Version: v0.12.5
Xcode version: Xcode 6.4 Build version 6E35b

Can you copy your working code into a Plunker (http://plnkr.co/edit/iA00S0?p=preview)?

3

I’m having the same issue as well. It appears that ionicScrollDelegate is applying its actions to the screen that is shifted off to the side rather than to the menu itself.Any ideas?

4

I’m seeing this too.

pos = $ionicScrollDelegate.$getByHandle('wi_scroller').getScrollPosition().top;

Provides the position in the desktop browser, but returns 0 in iOS 9.1.
ionic info:
Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Version: 1.2.4-nightly-1917
Ionic CLI Version: 1.7.12
Ionic App Lib Version: 0.6.5
ios-deploy version: 1.8.2
ios-sim version: 5.0.4
OS: Mac OS X El Capitan
Node Version: v4.2.4
Xcode version: Xcode 7.2 Build version 7C68

Using cordova-ios@4.1.0 to get around a previous issue

5

Single stepping down into the ionic.bundle.js, in

getValues: function() {
            return {
                left: this.__scrollLeft,
                top: this.__scrollTop,
                zoom: this.__zoomLevel
            };

this._scrollTop is always 0 when running on the device.

6

We did a jQuery workaround in the end.

// pos = parseInt($ionicScrollDelegate.$getByHandle('wi_scroller').getScrollPosition().top);
pos = document.getElementById('list-top').getBoundingClientRect().top;

and added a named HTML element to the top of the table

<ion-content delegate-handle="scroller" class="wi-scroller" id="scoller-id">
 <ion-list>
  <ion-item id="list-top"></ion-item>