$ionicScrollDelegate not working with Android

ionic-v1
1

I’m trying to use ion-scroll directive to make a swipeable list of search results

on iOS or even in Chrome developer tools set to iOS emulation it all works
in Android, both device and Chrome emulation, it doesn’t :frowning:

a couple of things are not working on Android

  • on-scroll event never gets fired
  • in the $scope.swipe method the $ionicScrollDelegate.$getByHandle(‘members-scroll’).scrollBy(xOffset, 0, true); line does nothing

there are no errors in the console, it just doesn’t work

here’s the code I’m working with

// HTML
<ion-content id="search-profile-previews" has-bouncing="false" scroll="false">

    <ion-scroll ng-if="MyCtrl.showContent" zooming="true" direction="x" ng-style="{width: getScrollWidth(), height: getHeight()}" delegate-handle="members-scroll" on-swipe-left="swipe('left')" on-swipe-right="swipe('right')" on-scroll="onScroll()">

      <div ng-style="{width: getFullWidth(), height: getHeight()}" class="slidesContainer">
        <div collection-repeat="member in MyCtrl.results" ng-click="showProfile(member.ID)" ng-style="{width: getItemWidth(),height: getItemHeight()}">

          <div class="member" ng-style="{width: getItemWidth(),height: getItemHeight()}">
            <div class="member-card">
              <div class="member-info">
                <div class="member-name">{{ member.displayTitle }}</div>
                <div class="member-function">{{ member.function }}</div>

              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
    </ion-scroll>

  </ion-content>

// JS code
angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope, $timeout, $ionicScrollDelegate) {

  $scope.MyCtrl = {
results: [{
  ID: 1,
  displayTitle: 'blabla',
  function: 'hehe'
}, {
  ID: 1,
  displayTitle: 'blabla',
  function: 'hehe'
}, {
  ID: 1,
  displayTitle: 'blabla',
  function: 'hehe'
}, {
  ID: 1,
  displayTitle: 'blabla',
  function: 'hehe'
}, {
  ID: 1,
  displayTitle: 'blabla',
  function: 'hehe'
}, {
  ID: 1,
  displayTitle: 'blabla',
  function: 'hehe'
}, {
  ID: 1,
  displayTitle: 'blabla',
  function: 'hehe'
}, {
  ID: 1,
  displayTitle: 'blabla',
  function: 'hehe'
}, {
  ID: 1,
  displayTitle: 'blabla',
  function: 'hehe'
}, {
  ID: 1,
  displayTitle: 'blabla',
  function: 'hehe'
}],
showContent: false

  };

  var scrollDelegate = null;

  $timeout(function() {
$scope.MyCtrl.showContent = true;
scrollDelegate = $ionicScrollDelegate.$getByHandle('members-scroll');
  }, 100);

  var pixelsOffset = 40;
  $scope.getScrollWidth = function() {
    return (window.innerWidth - pixelsOffset) + 'px';
  };
  $scope.getItemWidth = function() {
    return (window.innerWidth - pixelsOffset) + 'px';
  };

  $scope.getFullWidth = function() {
    var width = parseInt(window.innerWidth *         $scope.MyCtrl.results.length + pixelsOffset);
    return width + 'px';
  };
  $scope.getHeight = function() {
    return (parseInt(document.getElementById('search-profile-previews').clientHeight) - 40) + 'px';
  };
  $scope.getItemHeight = function() {
    return (parseInt(document.getElementById('search-profile-previews').clientHeight) - 40) + 'px';
  };
  $scope.onScroll = function() {
    console.log('onScroll');
    scrollDelegate.freezeScroll('true');
  };
  $scope.swipe = function(direction) {
    console.log(direction);
    var directionModifier = 1;
    if (direction == 'right') {
      directionModifier = -1;
    }
    var xOffset = (window.innerWidth - pixelsOffset) * directionModifier;
    console.log(xOffset);

    $timeout(function() {
      $ionicScrollDelegate.$getByHandle('members-scroll').scrollBy(xOffset, 0, true);
    });
  };
});

it works on CodePen, not sure how to emulate Android there. I tried adding the Android classes to the but that didn’t work

here’s my system info
Your system information:

Cordova CLI: 6.1.1
Gulp version: CLI version 1.2.1
Gulp local: Local version 3.9.1
Ionic Version: 1.3.0
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS: Distributor ID: Ubuntu Description: Ubuntu 15.04
Node Version: v4.4.2