Which element has the scrollbar in the page?

Ahmed Elshorbagy

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>

Fran Diox

@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.

Ahmed Elshorbagy

Thank you. I tried this but not working

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

Fran Diox

@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(); };

Ahmed Elshorbagy

@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

Fran Diox

@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).

Ahmed Elshorbagy

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

Fran Diox

@Ahmed-Elshorbagy https://codepen.io/frankdiox/pen/MmVWOL?editors=1010

Ahmed Elshorbagy

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