diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css index e41a6a8ecc..ada62249b5 100644 --- a/dist/css/ionic-ios7.css +++ b/dist/css/ionic-ios7.css @@ -365,10 +365,8 @@ body, .ionic-body { .content { position: absolute; - overflow: auto; width: 100%; - height: 100%; - -webkit-overflow-scrolling: touch; } + height: 100%; } .scroll-content { position: absolute; @@ -378,6 +376,10 @@ body, .ionic-body { bottom: 0; overflow: hidden; } +.overflow-scroll { + overflow: auto; + -webkit-overflow-scrolling: touch; } + .has-header { top: 44px; } diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css index 69776841a2..d7c0e0d058 100644 --- a/dist/css/ionic-scoped.css +++ b/dist/css/ionic-scoped.css @@ -1789,10 +1789,8 @@ transform: translateZ(0px); } .ionic .content { position: absolute; - overflow: auto; width: 100%; - height: 100%; - -webkit-overflow-scrolling: touch; } + height: 100%; } .ionic .scroll-content { position: absolute; top: 0; @@ -1800,6 +1798,9 @@ right: 0; bottom: 0; overflow: hidden; } + .ionic .overflow-scroll { + overflow: auto; + -webkit-overflow-scrolling: touch; } .ionic .has-header { top: 44px; } .ionic .has-footer { diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 49e7e03916..e02fa3013c 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -2196,10 +2196,8 @@ body, .ionic-body { .content { position: absolute; - overflow: auto; width: 100%; - height: 100%; - -webkit-overflow-scrolling: touch; } + height: 100%; } .scroll-content { position: absolute; @@ -2209,6 +2207,10 @@ body, .ionic-body { bottom: 0; overflow: hidden; } +.overflow-scroll { + overflow: auto; + -webkit-overflow-scrolling: touch; } + .has-header { top: 44px; } diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js index cd98bab918..68af0f6278 100644 --- a/dist/js/ionic-angular.js +++ b/dist/js/ionic-angular.js @@ -14,6 +14,7 @@ angular.module('ionic.service', [ angular.module('ionic.ui', [ 'ionic.ui.content', + 'ionic.ui.scroll', 'ionic.ui.tabs', 'ionic.ui.nav', 'ionic.ui.sideMenu', @@ -456,7 +457,7 @@ angular.module('ionic.ui.content', []) return { restrict: 'E', replace: true, - template: '
', + template: '
', transclude: true, compile: function(element, attr, transclude) { return function($scope, $element, $attr) { @@ -475,7 +476,22 @@ angular.module('ionic.ui.content', []) if(attr.hasTabs) { c.addClass('has-tabs'); } - $element.append(transclude($scope)); + + + // If they want plain overflows scrolling, add that as a class + if(attr.overflowScroll === "true") { + c.addClass('overflow-scroll'); + } else { + // Otherwise, supercharge this baby! + var sv = new ionic.views.Scroll({ + el: $element[0].firstElementChild + }); + // Let child scopes access this + $scope.scrollView = sv; + } + + var clone = transclude($scope); + angular.element($element[0].firstElementChild).append(clone); }; } }; @@ -919,29 +935,6 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges })(); ; -(function(ionic) { -'use strict'; - -/** - * @description - * The scroll directive lets you enable a content area for - * our custom momentum scrolling area. The benefit to a custom - * scroll area is configurability, and avoidance of the - * buggy -webkit-overflow-scrolling: touch. - */ - -angular.module('ionic.ui.scroll', []) - -.directive('scroll', function() { - return { - restrict: 'ECA', - replace: true, - transclude: true, - template: '
' - }; -}); -})(window.ionic); -; (function() { 'use strict'; diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js index d3f3f4235f..5421d39734 100644 --- a/js/ext/angular/src/directive/ionicContent.js +++ b/js/ext/angular/src/directive/ionicContent.js @@ -18,7 +18,7 @@ angular.module('ionic.ui.content', []) return { restrict: 'E', replace: true, - template: '
', + template: '
', transclude: true, compile: function(element, attr, transclude) { return function($scope, $element, $attr) { @@ -37,7 +37,22 @@ angular.module('ionic.ui.content', []) if(attr.hasTabs) { c.addClass('has-tabs'); } - $element.append(transclude($scope)); + + + // If they want plain overflows scrolling, add that as a class + if(attr.overflowScroll === "true") { + c.addClass('overflow-scroll'); + } else { + // Otherwise, supercharge this baby! + var sv = new ionic.views.Scroll({ + el: $element[0].firstElementChild + }); + // Let child scopes access this + $scope.scrollView = sv; + } + + var clone = transclude($scope); + angular.element($element[0].firstElementChild).append(clone); }; } }; diff --git a/js/ext/angular/src/directive/ionicScroll.js b/js/ext/angular/src/directive/ionicScroll.js deleted file mode 100644 index 1bdcf7ccf4..0000000000 --- a/js/ext/angular/src/directive/ionicScroll.js +++ /dev/null @@ -1,22 +0,0 @@ -(function(ionic) { -'use strict'; - -/** - * @description - * The scroll directive lets you enable a content area for - * our custom momentum scrolling area. The benefit to a custom - * scroll area is configurability, and avoidance of the - * buggy -webkit-overflow-scrolling: touch. - */ - -angular.module('ionic.ui.scroll', []) - -.directive('scroll', function() { - return { - restrict: 'ECA', - replace: true, - transclude: true, - template: '
' - }; -}); -})(window.ionic); diff --git a/js/ext/angular/src/ionicAngular.js b/js/ext/angular/src/ionicAngular.js index 52fd3812aa..e0938213d8 100644 --- a/js/ext/angular/src/ionicAngular.js +++ b/js/ext/angular/src/ionicAngular.js @@ -14,6 +14,7 @@ angular.module('ionic.service', [ angular.module('ionic.ui', [ 'ionic.ui.content', + 'ionic.ui.scroll', 'ionic.ui.tabs', 'ionic.ui.nav', 'ionic.ui.sideMenu', diff --git a/js/ext/angular/test/scroll.html b/js/ext/angular/test/scroll.html new file mode 100644 index 0000000000..ea125999a3 --- /dev/null +++ b/js/ext/angular/test/scroll.html @@ -0,0 +1,33 @@ + + + + Side Menus + + + + + + + + + + + +
+ Realllllyyy long content +
+
+
+ + + + + + + diff --git a/scss/ionic/_scaffolding.scss b/scss/ionic/_scaffolding.scss index 9edb8573e8..b28aa34069 100644 --- a/scss/ionic/_scaffolding.scss +++ b/scss/ionic/_scaffolding.scss @@ -61,10 +61,8 @@ body, .ionic-body { .content { position: absolute; - overflow: auto; width: 100%; height: 100%; - -webkit-overflow-scrolling: touch; } .scroll-content { @@ -77,6 +75,11 @@ body, .ionic-body { } // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. // Note: For these to work, content must come after both bars in the markup + +.overflow-scroll { + overflow: auto; + -webkit-overflow-scrolling: touch; +} .has-header { top: $bar-height; }