feat(scroll): native scrolling for scroll view

ionic-team · Dec 10, 2015 · c5b48cb · c5b48cb
1 parent 853453c
commit c5b48cb
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 3 deletions.
diff --git a/js/angular/directive/scroll.js b/js/angular/directive/scroll.js
@@ -44,19 +44,22 @@ 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
       var innerElement = jqLite('<div class="scroll"></div>');
       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
@@ -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
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html ng-app="navTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Scroll Click Tests</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <!--<link rel="stylesheet" href="../../../../dist/css/ionic.css">-->
+    <script src="../../../../dist/js/ionic.bundle.js"></script>
+    <style>
+      #click-notify {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 9997;
+        display: none;
+        padding: 8px;
+        background: red;
+        color: white;
+      }
+      #mousemove-notify {
+        position: absolute;
+        top: 40px;
+        left: 0;
+        z-index: 9998;
+        display: none;
+        padding: 8px;
+        background: orange;
+      }
+      #touchmove-notify {
+        position: absolute;
+        top: 80px;
+        left: 0;
+        z-index: 9999;
+        display: none;
+        padding: 8px;
+        background: yellow;
+      }
+      #touchcancel-notify {
+        position: absolute;
+        top: 120px;
+        left: 0;
+        z-index: 9999;
+        display: none;
+        padding: 8px;
+        background: purple;
+        color: white;
+      }
+      a {
+        display: block;
+        background: blue;
+        margin: 40px 80px;
+        padding: 40px;
+        -webkit-tap-highlight-color: transparent;
+        text-decoration: none;
+      }
+      .activated {
+        background: yellow;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-view title="Home" hide-nav-bar="true">
+      <ion-content>
+        <f style="display: block; width: 80%; margin: auto; background-color: green; height: 500px"></f>
+        <ion-scroll zooming="true" direction="xy" style="width: 500px; height: 200px">
+          <div style="width: 5000px; height: 5000px; background: url('https://upload.wikimedia.org/wikipedia/commons/a/ad/Europe_geological_map-en.jpg') repeat"></div>
+        </ion-scroll>
+        <f style="display: block; width: 80%; margin: auto; background-color: red; height: 2000px"></f>
+      </ion-content>
+    </ion-view>
+    <script>
+      angular.module('navTest', ['ionic']);
+    </script>
+  </body>
+</html>