js/ext/angular/test/scroll.html

<html ng-app="navTest">
  <head>
    <meta charset="utf-8">
    <title>Content</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../../../../dist/css/ionic.css">

    <script src="../../../../dist/js/ionic.bundle.js"></script>
    <style>
      .pane {
        background-color: #333;
        color: #eee;
      }
      h3 {
        margin: 20px 10px !important;
        color: #eee;
      }
      .hours {
        width: 1540px;
      }
      .hours > * {
        float: left;
        margin: 5px 10px;
      }
      .hours .icons {
        position: relative;
        width: 32px;
        height: 32px;
      }
      .hours .icon {
        font-size: 24px;
        color: #1e1e1e;
        position: absolute;
      }
      .hours .ion-ios7-sunny-outline {
        color: yellow;
        left: 2px;;
        top: 2px;
        font-size: 32px;
      }
      .hours .ion-cloud {
        left: 10px;
        top: 10px;
        color: #fff;
      }
    </style>
  </head>
  <body ng-controller="ThisCtrl">
    <ion-pane>

      <ion-content class="has-header" scroll="false">
        <h3>Hourly Forecast</h3>
        <ion-scroll direction="x" style="width: 100%; height: 20%;">
          <div class="hours">
            <div ng-repeat="hour in hours">
              <div class="icons">
                <i class="icon ion-ios7-sunny-outline"></i>
                <i class="icon ion-cloud"></i>
              </div>
              </a>
              <div>
                {{hour.temp}} &deg;F
              </div>
            </div>
          </div>
        </ion-scroll>
        <a class="button" ng-click="scrollTo()">
          Scroll to 100
        </a>
        <ion-scroll direction="y" style="height: 400px; width: 300px; background: red;">
          <div style="width: 100px; height: 4000px; background: url('tree_bark.png') repeat"></div>
        </ion-scroll>
      </ion-content>
    </ion-pane>

    <script>
      angular.module('navTest', ['ionic'])

      .directive('hidesHeader', function() {
        return {
          link: function($scope, $element, $attr) {
            var startTop = $element[0].offsetTop;
            console.log("Starting", startTop);
          }
        }
      })

      .controller('ThisCtrl', function($scope, $ionicScrollDelegate) {
        var header = document.getElementById('header');
        var content = document.getElementById('container');

        $scope.hours = [];
        for(var i = 0; i < 24; i++) {
          $scope.hours.push({
            icon: 'ion-ios7-partlysunny-outline',
            temp: 40 + Math.floor(Math.random() * 10)
          })
        }
        $scope.onScrollComplete = function(event, scrollTop, scrollLeft) {
          console.log('Scroll complete', scrollTop, scrollLeft);
        }
        $scope.scrollTo = function() {
          console.log('scrollTo');
          $ionicScrollDelegate.scrollTo(0, 100, true);
        };
        $scope.onScroll = function(event, scrollTop, scrollLeft) {
        /*
          if(scrollTop > startTop) {
            var diff = scrollTop - startTop;
            console.log(diff);
            header.style[ionic.CSS.TRANSFORM] = 'translate3d(0px, -' + diff + 'px, 0)';
            content.style.marginTop = -diff + 'px';
          }
          console.log('Scroll', scrollTop, scrollLeft);
          */
        };
      })

      .controller('AppCtrl', function($scope, $compile, $timeout, $element) {
        $scope.items = [];
        for(var i = 0; i < 70; i++) {
          $scope.items.push({
          });
        }
        $timeout(function() {
          $scope.scrollView.resize();
        }, 1000);
      })
    </script>
  </body>
</html>