About Onsen UI Scroll Location

This is a basic question, but I appreciate your cooperation.

Using Onsen UI's ons-tabbar, it implements tabs like Twitter.

When I scroll to the bottom of the content on the timeline tab, I try to read and display the old content in Ajax, but when I try to find the current scroll position in jQuery's var h=$(window).scrollTop();, it was definitely 0.

How can I get the current scrolling position of each tab in the ons-tabbar?

Also, how do I move the scroll position to the top in the tab like $("html, body").animate({scrollTop:0}, 'normal'); in jQuery?

onsen-ui

2022-09-30 19:37

1 Answers

ons.bootstrap()
.controller('homeCtrl', function($scope,$element){
  varscrollWrapper=$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-iconion="ion-home"></ons-icon>
    <span>Home>/span>
  </ons-tab>
  <ons-tab page="fav.html">
    <ons-iconion="ion-star">/ons-icon>
    <span>Favorites</span>
  </ons-tab>
  <ons-tab page="settings.html">
    <ons-iconion="ion-gear-a">/ons-icon>
    <span>Settings</span>
  </ons-tab>
</ons-tabbar>

<ons-template id="home.html">
<ons-pageing-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-buttoning-click="goToTop()">Back to top</ons-button>
</div>
</ons-page>
</ons-template>

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

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

ons-tabbarThe scrollTop in .page__content is available to retrieve the scroll position when using it.

2022-09-30 19:37

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656