I have Paul Irish’s infinite scroll plugin on my site and it’s running perfectly on one page, but not on another. On the non-working page it seems to be detecting the page as being much taller than what it actually is. On the working page I get debug messages like ["math:", 260, 110], on the non-working one I get messages like ["math:", 807, 3154]. Sometimes it will jump up to 4264, or it will fall as low as 997, but it’s always much higher than the consistent 110 on the working page.
I’m assuming that the first coordinate is the distance of the bottom of the window from the bottom of the document and the second is the distance of the bottom of the container from the bottom of the document. If my assumptions are correct, the script is incorrectly detecting the bottom of the container for some reason. I haven’t been able to find any mismatched html tags, though you’re welcome to take a look yourself here. What are some things that might cause the plugin to detect the height incorrectly?
The problem was that I was hiding the pagination controls before the infinite scroll script was applied to the non-working page, causing it to become confused about the height. Moving the hide statement into a document.ready so that the infinite scroll script could accurately assess the height of the page first fixed the problem.
I know that the infinite scroll script automatically hides the pagination controls, but it doesn’t do it until after the first time it loads another set of items. If there is only one page or the first page is rather short, such as if you’re using masonry and the user has a large screen, the pagination controls would show up on their screen, so in those cases you may want to hide the controls manually.