Which element has the scrollbar in the page?



  • Hello,

    I have a div inside a <ons-page> element, when I fill the div with data from my Rest API a scrollbar appears to scroll the content. I want to know if that scrollbar belongs to the div or to the page element or to the document itself. I added a scroll function to each element to find out but it did not work. I’m trying to load more content when the user hit the page bottom, I tried <ons-lazy-repeat> but it did not work well because I’m displaying 3 element per row not one

      <ons-template id="home.html">
        <ons-page>
    <center>
    <div id="divContent" class="content">
    </div>
    </center>
    </ons-page> 
    </ons-template>
    <script>
      $('document').ready(function () {
        $('#divContent').on('scroll', function () {
             alert('divContent');
            }
         );
    });
    </script>

  • Onsen UI

    @Ahmed-Elshorbagy The page element creates this structure:

    <ons-page>
      toolbar
      <div class="page__background"></div>
      <div class="page__content">
          normal user content
      </div>
      fixed user content
    </ons-page>
    

    The scrollable element is page__content. You can provide it directly when you create ons-page if you specify a div with page__content or content classes.

    However, I don’t think you need to worry about this since the “load more” behavior is covered in ons-page. Have a look at the docs.



  • Thank you. I tried this but not working

    <ons-page on-infinite-scroll="alert('hi');">
    </ons-page>
    

  • Onsen UI

    @Ahmed-Elshorbagy Quoting the docs:

    Path of the function to be executed on infinite scrolling. Example: app.loadData. The function receives a done callback that must be called when it’s finished. Optional.

    It is not an expression so your alert(...) won’t be evaluated. Just pass a variable that contains a function. Or even better, use the DOM prop that is also described in the docs:

    pageElement.onInfiniteScroll = function(done) { alert(...); done(); };
    


  • @Fran-Diox Thank you. I tried this but it did not work

    <ons-template id="home.html">
        <ons-page id="mypage">
          <ons-toolbar>
      </ons-toolbar>      
    </ons-page> 
    </ons-template>
    <script>
         var mypage = $('#mypage');
         mypage.onInfiniteScroll = function (done) {       
             alert('hh');
             done();
         };
    </script>
    

    No error but nothing happened


  • Onsen UI

    @Ahmed-Elshorbagy That’s normal because you are accessing a template, not a page instance. If you didn’t yet, I’d recommend reading the guide overview to know how Onsen UI works. Have a look at the page lifecycle events, especially init event (example here).



  • I read the documents many times but I still don’t get it,sorry. I don’t what I’m missing here.
    Is there a working example? I have been trying for 4 days. I got these errors

    onInfiniteScroll must be a function or null
        at HTMLElement.set (onsenui.min.js:10)
        at HTMLElement.modifier.name._muted.name._skipinit.name.on-infinite-scroll.current.onInfiniteScroll [as _onInfiniteScroll] (onsenui.min.js:9)
        at HTMLElement.value (onsenui.min.js:9)
    set @ onsenui.min.js:10
    modifier.name._muted.name._skipinit.name.on-infinite-scroll.current.onInfiniteScroll @ onsenui.min.js:9
    value @ onsenui.min.js:9
    

  • Onsen UI



  • Thank you very much. I was using my page name inside the init event not the page element , it is working now.


Log in to reply