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;
}