[v2] Can't get infinite-scroll-top to trigger

I’m using the messages layout in a popup and I’m trying to use infinite-scroll-top on the .page-content.messages-content div…but it’s not triggering the infinite event. I’ve tried all sorts of different values for the data-infinite-distance attribute, but none work.

Any suggestions on how to get it working?

Layout here:

<div class="page-content messages-content infinite-scroll-content infinite-scroll-top" data-infinite-distance="50">
    <div class="preloader infinite-scroll-preloader"></div>
    <div class="messages"></div>
</div> 

Listener here:

$('#messages-popup .infinite-scroll-content').on('infinite', function () {
     console.log('infinite scroll triggered');
});

Do you have initialized View in popup? Infinite scroll can be enabled on page init, but if you don’t have there View then no page init -> no infinite scroll. If you don’t want to use View there, then use app.infiniteScroll.create method to init it manually

Yeah, stupid me…i wasn’t initializing the view in the popup, so the page:init event wasn’t being fired, and the infiniteScroll instance wasn’t being created automatically.

I added app.infiniteScroll.create($('#messages-popup .infinite-scroll-content')); to the $('#messages-popup').on('popup:open', function () { and it’s working.

Thanks!

1 Like