

初歩的な質問になりますがよろしくお願いします。

Onsen UIのons-tabbarを利用してTwitterのようにタブごとに分かれた機能を実装しています。

タイムラインのタブでコンテンツの一番下までスクロールした場合、古いコンテンツをAjaxで読み込んで表示させようと思っているのですが、jQueryの `var
h = $(window).scrollTop();` で現在のスクロール位置を確かめようとしても h はずっと 0 でした。

ons-tabbarの中では、どうすればそれぞれのタブの現在のスクロール位置を取得する事が出来るのでしょうか？

それとjQueryの `$("html,body").animate({ scrollTop: 0 }, 'normal');`
のようにタブ内でスクロール位置をトップに移動させるのはどうすればよろしいでしょうか？


CC BY-SA 3.0
2015-08-23T06:45:32.907
14753
2015-08-24T02:26:10.947
2015-08-23T06:50:49.327
5337
11032
question
onsen-ui
Onsen UI のスクロール位置について

[code]

    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;
        });
      });
    });
[/code]

[code]

    .scroll-value{
      width: 100px;
      position: fixed;
      right: 0;
      top: 0;
    }
[/code]

[code]

    <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>
[/code]

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


CC BY-SA 3.0
2015-08-24T02:20:59.160
14768
2015-08-24T02:26:10.947
2015-08-24T02:26:10.947
8532
8532
14753
answer