[SOLVED] How do I use app.infiniteScroll.create?


I’m reading the docs but I can’t seem to understand how to trigger in manually. What CSS selector should I put in there? Is it the one where the infinite-scroll-content class will be added (in my case it’s the .page-content div), or should it be the parent element? Do I also need to manually add


I’m trying to have it where a condition must be satisfied first before adding the infinite scrolling feature. My code looks like this:

<div class="page" data-page="home">
  <div class="page-content infinite-scroll-content">
    <div class="list simple-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
        <li>Item 11</li>
        <li>Item 12</li>
        <li>Item 13</li>
        <li>Item 14</li>
        <li>Item 15</li>
        <li>Item 16</li>
        <li>Item 17</li>
        <li>Item 18</li>
        <li>Item 19</li>
        <li>Item 20</li>
    <div class="preloader infinite-scroll-preloader"></div>

What do I need to change so that infinite scrolling will be enabled whenever I want to and not on init?


If you don’t want to add it on init, then remove infinite-scroll-content class from page-content. And when you need to add/enable it:


after that it will start to listen for scroll events and emit infinite events.

Thanks, Vladimir. However app.infinite.create($(’.page-content’)); isn’t working for me. The loading animation just runs and the items do not load. Any idea why? I put it inside $$(document).on(‘page:init’, ‘.page[data-name=“home”]’, function (e) {})

Thanks. :slight_smile:

EDIT: Oh I just realized why! I should have put app.infiniteScroll.create($(’.page-content’));. Thanks for everything, Vladimir. :slight_smile: Till my next question. Haha!