New data loading fires too early

[SynRJ]

Hello,

I've got an issue similar to this one https://github.com/paulirish/infinite-scroll/issues/549, but I think the solution given there doesn't apply to my case.

The data loading fires even if I don't reach the bottom of the page (so after a few scrolls, everything is loaded, and I'm not even at the bottom of the first data set...). Actually, it fires every time I stop scrolling. Every time I stop scrolling by releasing my mouse scroll, it fires, even if I scroll up.

The HTML code looks like (blade template):

<div id="jscroll">
  @foreach ($results->getItems() as $result)
    <div class="contenu">...</div>
  @endforeach
</div>

<ul class="pagination">
  <li class="disabled"><span>&laquo;</span></li>
  <li class="active"><span>1</span></li>
  <li><a href="http://localhost/...?page=2">2</a></li>
  <li><a href="http://localhost/...?page=2" rel="next">&raquo;</a></li>
</ul>

And here is the javascript code:

$('#jscroll').infinitescroll({
  navSelector   : ".pagination",
  nextSelector  : ".pagination a:last",
  itemSelector  : ".contenu",
  path: function(index) {
    return "?page=" + index;
  }
});

Here are some debug info:

• When I load the page:

pixelsFromNavToBottom: 34.283447265625

• When I scroll once:

["math:", -114, 34.283447265625]
["heading into ajax", "?page=2"]

• When I scroll another time:

["contentSelector", div#jscroll]
["math:", -228, 34.283447265625]
["heading into ajax", "?page=3"]

Can anyone help me with this issue please?

Thank you

[jacopotarantino]

It should be firing when you finish scrolling. That, at least, is expected behavior. Can you verify that your nav selector is definitely not inside of the #jscroll element in the served html? That's usually the cause of this bug.

[Jokinen]

Shouldn't the latter number update when you load new content on to a page?

["math:", -200, -2882]

I have this same issue and I've checked that my pagination doesn't exist inside any element referenced in the configuration, if you exclude itself. I get an almost constant 100 unit scroll.

["math:", -300, -2882]

["math:", -400, -2882]

Until the former number exceeds the latter:

["math:", -2900, -2882]

And the script loads the content from the next page:

["heading into ajax", "?page=2"]
XHR finished loading: GET "http://localhost/?page=2".
["contentSelector", ol.link-list]

With the next scroll it decreases the former number by another 200 units.

["math:", -3100, -2882]

And fetches the third page.

Then it goes back in to 100 unit long scrolls and continues them until the end.

Simply looking at the log, it seems as though at least one of the numbers should update. Now it seems as if the script is thinking that it's at the end of the page constantly, because the amount you have scrolled exceeds the amount to scroll. One side effect of this is that new content gets loaded even when you scroll up.

I use the binder option to bind to a scrolling element. My window and document are always the same height (my body element is 100% x 100% position fixed, and HTML element is 100% x 100% as well). I have a main element inside the body which has overflow-y: scroll;

[alse]

A missing html doctype declaration caused the same problem for me. Without the doctype, $(window).height() the same as $(document).height() in Chrome, so the _nearbottom function returns the wrong result.

[desandro]

Sorry to hear you're having trouble with Infinite Scroll.

Infinite Scroll v3 is out!. It's an all new re-write, so take a look at how to upgrade from v2.

I recommend upgrading to v3. Please open a new issue if you run into trouble with Infinite Scroll v3.