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>
-
@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 createons-page
if you specify a div withpage__content
orcontent
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>
-
@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
-
@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 errorsonInfiniteScroll 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
-
-
Thank you very much. I was using my page name inside the init event not the page element , it is working now.