Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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.