3. Scroll event on ons-page, or any other element inside ons-page

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.

Scroll event on ons-page, or any other element inside ons-page

  • D

    Hello, I am using the first version of OnsenUI with Angular 1 and I wanted to have some scrolling animations like current apps, such as facebook, twitter, etc. Basically it listens to the scroll event on the page and changes the appearance of the toolbar based on the position of the page. The problem is that OnsenUI blocks all the scroll listeners, is there a way to get that scroll listener from any element in the dom using onsen or by other methods. I tried multiple things via jquery and Angular directives and had no luck.

    Thank you!

    1

  • Hi @davidfherrerar.

    Onsen UI shouldn’t be blocking the scroll event. The scroll event just doesn’t bubble (even without Onsen UI).

    And since there is a specific element which is being scrolled, probably you’re just not attaching your listener to that element. In this case ons-page isn’t actually the element which is being scrolled. ons-page has a child .page__content which is the one which is being scrolled.

    So if you just attach the listener to the element which is being scrolled everything will be fine.

    Here’s a simple Demo of what you want to do if I understood correctly.

    2