fix(scrolling): Collection repeat requires JS scrolling

ionic-team · May 1, 2015 · 0557c30 · 0557c30
1 parent 08c37f9
commit 0557c30
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/js/angular/directive/content.js b/js/angular/directive/content.js
@@ -71,6 +71,13 @@ function($timeout, $controller, $ionicBind, $ionicConfig) {
         element.addClass('scroll-content-false');
       }
 
+      var nativeScrolling = attr.overflowScroll === "true" || !$ionicConfig.scrolling.jsScrolling();
+
+      // collection-repeat requires JS scrolling
+      if (nativeScrolling) {
+        nativeScrolling = !element[0].querySelector('[collection-repeat]');
+      }
+
       return { pre: prelink };
       function prelink($scope, $element, $attr) {
         var parentScope = $scope.$parent;
@@ -116,7 +123,8 @@ function($timeout, $controller, $ionicBind, $ionicConfig) {
         } else {
           var scrollViewOptions = {};
 
-          if (attr.overflowScroll === "true" || !$ionicConfig.scrolling.jsScrolling()) {
+          // determined in compile phase above
+          if (nativeScrolling) {
             // use native scrolling
             $element.addClass('overflow-scroll');
 

diff --git a/test/unit/angular/directive/collectionRepeat.unit.js b/test/unit/angular/directive/collectionRepeat.unit.js
@@ -180,6 +180,16 @@ describe('collectionRepeat', function() {
     expect(scrollView.options.getContentHeight).toBe(originalGetContentHeight);
   }));
 
+  it('should force JS scrolling', inject(function($compile, $rootScope) {
+    var scope = $rootScope.$new();
+    var content = $compile('<ion-content overflow-scroll="true">' +
+        '                     <div collection-repeat="item in items" item-height="5" item-width="5"></div>' +
+        '                   </ion-content')(scope);
+    var scrollCtrl = content.data('$$ionicScrollController');
+    $rootScope.$apply()
+    expect(scrollCtrl.isNative()).toBe(false)
+  }));
+
   describe('automatic dimensions', function() {
     it('should use computed width/height', inject(function($window) {
       spyOn($window, 'getComputedStyle').andReturn({