diff --git a/js/angular/directive/scroll.js b/js/angular/directive/scroll.js
index 1ca29473800..dafcfa15139 100644
--- a/js/angular/directive/scroll.js
+++ b/js/angular/directive/scroll.js
@@ -44,12 +44,13 @@ IonicModule
'$timeout',
'$controller',
'$ionicBind',
-function($timeout, $controller, $ionicBind) {
+ '$ionicConfig',
+function($timeout, $controller, $ionicBind, $ionicConfig) {
return {
restrict: 'E',
scope: true,
controller: function() {},
- compile: function(element) {
+ compile: function(element, attr) {
element.addClass('scroll-view ionic-scroll');
//We cannot transclude here because it breaks element.data() inheritance on compile
@@ -57,6 +58,8 @@ function($timeout, $controller, $ionicBind) {
innerElement.append(element.contents());
element.append(innerElement);
+ var nativeScrolling = attr.overflowScroll !== "false" && (attr.overflowScroll === "true" || !$ionicConfig.scrolling.jsScrolling());
+
return { pre: prelink };
function prelink($scope, $element, $attr) {
$ionicBind($scope, $attr, {
@@ -84,6 +87,12 @@ function($timeout, $controller, $ionicBind) {
if (!$scope.direction) { $scope.direction = 'y'; }
var isPaging = $scope.$eval($scope.paging) === true;
+ if(nativeScrolling) {
+ $element.addClass('overflow-scroll');
+ }
+
+ $element.addClass('scroll-' + $scope.direction);
+
var scrollViewOptions = {
el: $element[0],
delegateHandle: $attr.delegateHandle,
@@ -97,8 +106,10 @@ function($timeout, $controller, $ionicBind) {
zooming: $scope.$eval($scope.zooming) === true,
maxZoom: $scope.$eval($scope.maxZoom) || 3,
minZoom: $scope.$eval($scope.minZoom) || 0.5,
- preventDefault: true
+ preventDefault: true,
+ nativeScrolling: nativeScrolling
};
+
if (isPaging) {
scrollViewOptions.speedMultiplier = 0.8;
scrollViewOptions.bouncing = false;
diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss
index e38464c35d4..d5134afc7a6 100644
--- a/scss/_scaffolding.scss
+++ b/scss/_scaffolding.scss
@@ -83,6 +83,14 @@ body.grade-c {
display: block;
overflow: hidden;
+ &.overflow-scroll {
+ position: relative;
+ }
+
+ &.scroll-x { overflow-x: scroll; overflow-y: hidden; }
+ &.scroll-y { overflow-x: hidden; overflow-y: scroll; }
+ &.scroll-xy { overflow-x: scroll; overflow-y: scroll; }
+
// Hide the top border if any
margin-top: -1px;
}
diff --git a/test/html/scroll_content.html b/test/html/scroll_content.html
new file mode 100644
index 00000000000..9ba01de8f8f
--- /dev/null
+++ b/test/html/scroll_content.html
@@ -0,0 +1,76 @@
+
+
+
+
+ Scroll Click Tests
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+