fix(scroll): anchor scroll should scroll to IDs that are multiple lev…

…els beneath the scroll view. Closes #1804
ionic-team · Jul 21, 2014 · 3d0a46e · 3d0a46e
1 parent 5b50e12
commit 3d0a46e
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 5 deletions.
diff --git a/js/angular/controller/scrollController.js b/js/angular/controller/scrollController.js
@@ -146,12 +146,19 @@ function($scope, scrollViewOptions, $timeout, $window, $$scrollValueCache, $loca
     this.resize().then(function() {
       var hash = $location.hash();
       var elm = hash && $document[0].getElementById(hash);
-      if (hash && elm) {
-        var scroll = ionic.DomUtil.getPositionInParent(elm, self.$element);
-        scrollView.scrollTo(scroll.left, scroll.top, !!shouldAnimate);
-      } else {
+      if (!(hash && elm)) {
         scrollView.scrollTo(0,0, !!shouldAnimate);
+        return;
       }
+      var curElm = elm;
+      var scrollLeft = 0, scrollTop = 0, levelsClimbed = 0;
+      do {
+        if(curElm !== null)scrollLeft += curElm.offsetLeft;
+        if(curElm !== null)scrollTop += curElm.offsetTop;
+        curElm = curElm.offsetParent;
+        levelsClimbed++;
+      } while (curElm.attributes != self.element.attributes && curElm.offsetParent !== null);
+      scrollView.scrollTo(scrollLeft, scrollTop, !!shouldAnimate);
     });
   };
 

diff --git a/test/unit/angular/controller/scrollController.unit.js b/test/unit/angular/controller/scrollController.unit.js
@@ -292,7 +292,12 @@ describe('$ionicScroll Controller', function() {
         }));
         it('.anchorScroll with el matching hash should scroll to it', inject(function($location, $document) {
           $document[0].getElementById = jasmine.createSpy('byId').andCallFake(function() {
-            return { offsetLeft: 8, offsetTop: 9 };
+            return {
+              offsetLeft: 8,
+              offsetTop: 9,
+              attributes:[],
+              offsetParent:{}
+            };
           });
           spyOn($location, 'hash').andCallFake(function() {
             return 'foo';
@@ -305,6 +310,37 @@ describe('$ionicScroll Controller', function() {
     });
   });
 
+  it('should work', function() {
+    var ele = {
+      offsetLeft: 8,
+      offsetTop: 9,
+      attributes:[],
+      offsetParent:{
+        offsetLeft: 10,
+        offsetTop: 11,
+        attributes:[],
+        offsetParent:{}
+      }
+    };
+    module('ionic', function($provide) {
+      $provide.value('$document', [ { getElementById: function(){ return ele; } } ]);
+    });
+    inject(function($controller, $rootScope, $location, $timeout) {
+      var scrollCtrl = $controller('$ionicScroll', {
+        $scope: $rootScope.$new(),
+        $element: jqLite('<div><div></div></div>'),
+        scrollViewOptions: { el: jqLite('<div><div></div></div>')[0] }
+      });
+      spyOn($location, 'hash').andCallFake(function() {
+           return 'bar';
+      });
+      spyOn(scrollCtrl.scrollView, 'scrollTo')
+      scrollCtrl.anchorScroll()
+      $timeout.flush();
+      expect(scrollCtrl.scrollView.scrollTo.mostRecentCall.args).toEqual([18, 20, false]);
+    });
+  });
+
   it('should not activatePullToRefresh if setRefresher is not called', function() {
     setup();
     timeout.flush();