Monaca Onsen UI Discord Chat Github Repo

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

  • 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!

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