trigger infinite-scroll when there's not enough content for scroll bar on page load

Question

I'm using the great infinite-scroll plugin- http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

But on larger screen resolutions there's not enough posts to display a scroll bar so the infinite-scroll never gets triggered. Wondered if these a way around this without having a large number of initial posts.

Guessing some kind of if statement to check browser height etc. But how do i then trigger the infinite-scroll if it returns true.

Any ideas

Thanks

Ben

score 15 · Answer 1 · answered Aug 02 '12 at 14:46

15

One way to go for a quick check would be:

// Force 'retrieve' for next page if window is taller than document
if($(window).height() >= $(document).height()){
$wall.infinitescroll('retrieve');
};

Guess you may need to turn this into a function for multiple 'retrieve' if needed until window is not taller than the document.

answered Aug 02 '12 at 14:46

Luigi

384
2
15

This should be chosen as the answer. Thanks Luigi! – Joe Jan 18 '13 at 01:45

score 4 · Answer 2 · answered May 31 '13 at 00:15

4

For newer versions of infinitescroll, set the option

prefill: true

This solution was created and discussed on this issue on github.

answered May 31 '13 at 00:15

Philipp Zedler

1,520
1
13
32

It doesn't work for me. It stays the same way, without vertical scroll and new items aren't added. – Atadj Sep 08 '13 at 21:11
Make sure you are using the newest version of the infinitescroll plugin. – Philipp Zedler Sep 09 '13 at 07:27
I'm using 2.0b2.120519, still nothing. The other answer to this question works. – Atadj Sep 09 '13 at 09:15
Be careful though about doing prefill if you ever don't have enough to fill the page: https://github.com/metafizzy/infinite-scroll/issues/797 – Adam Lane Jun 02 '18 at 22:33

score 2 · Answer 3 · answered Apr 27 '17 at 16:00

I know question is old, but this will help many of you.

@Luigi answer is good, but what if loading content once to show scrollbar is not enough?

This should do it best

var no_scrollbar_workaround = setInterval(function checkVariable() {

           if($(window).height() >= $(document).height()) {
                    jsonloader(); //here you put your function for more content
            } else {
                    clearInterval(no_scrollbar_workaround);
            }
}, 1000);

This will run several times, until needed to actually show scroll bar.

You can test this function and see all it's glory when you zoom out page as far as you can with Ctrl + -.

You will see call for new content until scrollbar is shown.

trigger infinite-scroll when there's not enough content for scroll bar on page load

3 Answers3