Skip to main content
本文から 106 文字削除
ソース リンク
cither
  • 1,448
  • 2
  • 9
  • 16
ons.bootstrap()
.controller('homeCtrl', function($scope, $element){
  var scrollWrapper = $element.find('.page__content');
  $scope.scrollTop = scrollWrapper.scrollTop();
  
  $scope.goToTop = function(){
    scrollWrapper.animate({'scrollTop': 0}, 'slow');
  };
  
  scrollWrapper.on('scroll', function(e){
    $scope.$apply(function(){
      $scope.scrollTop = e.target.scrollTop;
    });
  });
});
.scroll-value{
  width: 100px;
  position: fixed;
  right: 0;
  top: 0;
}
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>


<ons-tabbar>
  <ons-tab page="home.html" active="true">
    <ons-icon icon="ion-home"></ons-icon>
    <span>Home</span>
  </ons-tab>
  <ons-tab page="fav.html">
    <ons-icon icon="ion-star"></ons-icon>
    <span>Favorites</span>
  </ons-tab>
  <ons-tab page="settings.html">
    <ons-icon icon="ion-gear-a"></ons-icon>
    <span>Settings</span>
  </ons-tab>
</ons-tabbar>

<ons-template id="home.html">
<ons-page ng-controller="homeCtrl">
  
<div class="scroll-value">{{scrollTop}}</div>
  
<ons-list>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
</ons-list>
<div  style="text-align:center">
<ons-button ng-click="goToTop()">トップへ戻る</ons-button>
</div>
</ons-page>
</ons-template>

<ons-template id="fav.html">
fav
</ons-template>

<ons-template id="settings.html">
settings
</ons-template>
ons.bootstrap()
.controller('homeCtrl', function($scope, $element){
  var scrollWrapper = $element.find('.page__content');
  $scope.scrollTop = scrollWrapper.scrollTop();
  
  $scope.goToTop = function(){
    scrollWrapper.animate({'scrollTop': 0}, 'slow');
  };
  
  scrollWrapper.on('scroll', function(e){
    $scope.$apply(function(){
      $scope.scrollTop = e.target.scrollTop;
    });
  });
});
.scroll-value{
  width: 100px;
  position: fixed;
  right: 0;
  top: 0;
}
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>


<ons-tabbar>
  <ons-tab page="home.html" active="true">
    <ons-icon icon="ion-home"></ons-icon>
    <span>Home</span>
  </ons-tab>
  <ons-tab page="fav.html">
    <ons-icon icon="ion-star"></ons-icon>
    <span>Favorites</span>
  </ons-tab>
  <ons-tab page="settings.html">
    <ons-icon icon="ion-gear-a"></ons-icon>
    <span>Settings</span>
  </ons-tab>
</ons-tabbar>

<ons-template id="home.html">
<ons-page ng-controller="homeCtrl">
  
<div class="scroll-value">{{scrollTop}}</div>
  
<ons-list>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
</ons-list>
<div  style="text-align:center">
<ons-button ng-click="goToTop()">トップへ戻る</ons-button>
</div>
</ons-page>
</ons-template>

<ons-template id="fav.html">
fav
</ons-template>

<ons-template id="settings.html">
settings
</ons-template>
ons.bootstrap()
.controller('homeCtrl', function($scope, $element){
  var scrollWrapper = $element.find('.page__content');
  $scope.scrollTop = scrollWrapper.scrollTop();
  
  $scope.goToTop = function(){
    scrollWrapper.animate({'scrollTop': 0}, 'slow');
  };
  
  scrollWrapper.on('scroll', function(e){
    $scope.$apply(function(){
      $scope.scrollTop = e.target.scrollTop;
    });
  });
});
.scroll-value{
  width: 100px;
  position: fixed;
  right: 0;
  top: 0;
}
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>


<ons-tabbar>
  <ons-tab page="home.html" active="true">
    <ons-icon icon="ion-home"></ons-icon>
    <span>Home</span>
  </ons-tab>
  <ons-tab page="fav.html">
    <ons-icon icon="ion-star"></ons-icon>
    <span>Favorites</span>
  </ons-tab>
  <ons-tab page="settings.html">
    <ons-icon icon="ion-gear-a"></ons-icon>
    <span>Settings</span>
  </ons-tab>
</ons-tabbar>

<ons-template id="home.html">
<ons-page ng-controller="homeCtrl">
  
<div class="scroll-value">{{scrollTop}}</div>
  
<ons-list>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
</ons-list>
<div  style="text-align:center">
<ons-button ng-click="goToTop()">トップへ戻る</ons-button>
</div>
</ons-page>
</ons-template>

<ons-template id="fav.html">
fav
</ons-template>

<ons-template id="settings.html">
settings
</ons-template>
ソース リンク
cither
  • 1,448
  • 2
  • 9
  • 16

ons.bootstrap()
.controller('homeCtrl', function($scope, $element){
  var scrollWrapper = $element.find('.page__content');
  $scope.scrollTop = scrollWrapper.scrollTop();
  
  $scope.goToTop = function(){
    scrollWrapper.animate({'scrollTop': 0}, 'slow');
  };
  
  scrollWrapper.on('scroll', function(e){
    $scope.$apply(function(){
      $scope.scrollTop = e.target.scrollTop;
    });
  });
});
.scroll-value{
  width: 100px;
  position: fixed;
  right: 0;
  top: 0;
}
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>


<ons-tabbar>
  <ons-tab page="home.html" active="true">
    <ons-icon icon="ion-home"></ons-icon>
    <span>Home</span>
  </ons-tab>
  <ons-tab page="fav.html">
    <ons-icon icon="ion-star"></ons-icon>
    <span>Favorites</span>
  </ons-tab>
  <ons-tab page="settings.html">
    <ons-icon icon="ion-gear-a"></ons-icon>
    <span>Settings</span>
  </ons-tab>
</ons-tabbar>

<ons-template id="home.html">
<ons-page ng-controller="homeCtrl">
  
<div class="scroll-value">{{scrollTop}}</div>
  
<ons-list>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
<ons-list-item>aaa</ons-list-item>
</ons-list>
<div  style="text-align:center">
<ons-button ng-click="goToTop()">トップへ戻る</ons-button>
</div>
</ons-page>
</ons-template>

<ons-template id="fav.html">
fav
</ons-template>

<ons-template id="settings.html">
settings
</ons-template>

ons-tabbar使用時のスクロール位置の取得には.page__contentscrollTopが利用できます。