Monaca Onsen UI Discord Chat Github Repo

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">
    <div id="divContent" class="content">
      $('document').ready(function () {
        $('#divContent').on('scroll', function () {

  • Onsen UI

    @Ahmed-Elshorbagy The page element creates this structure:

      <div class="page__background"></div>
      <div class="page__content">
          normal user content
      fixed user content

    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');">

  • 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">
         var mypage = $('#mypage');
         mypage.onInfiniteScroll = function (done) {       

    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 [as _onInfiniteScroll] (onsenui.min.js:9)
        at HTMLElement.value (onsenui.min.js:9)
    set @ onsenui.min.js:10 @ 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.