Auto load content on scroll down

问题

I am creating a blog on django/webfaction. My hompage currently displays 4 posts by default (posts are limited to 4 on queryset in urls.py). Now I would like to load four more posts once user reaches the bottom of the page and keep on continuing that until last post is reached. How to achieve this?

回答1:

If you want to load your content on reaching extreme bottom of document use following code:

$(window).scroll(function()
{
    if($(window).scrollTop() == $(document).height() - $(window).height())
    {
          // load your content
    }
});

If you want to load content before reaching 100 pixel of bottom use

var loading= false;
$(window).scroll(function() {
    if (!loading && ($(window).scrollTop() >  $(document).height() - $(window).height() - 100)) {
        loading= true;

        // your content loading call goes here.

        loading = false; // reset value of loading once content loaded
    }
});

回答2:

You can try something like this..

var processScroll = true;
$(window).scroll(function() {
    if (processScroll  && $(window).scrollTop() > $(document).height() - $(window).height() - 100) {
        processScroll = false;
        // your functionality here
        processScroll = true;
    }
});

回答3:

You can make Ajax call to fetch more posts on 'onscroll' event of element (possibly on body in your case). You can make the same call using jquery's '.scroll()' documented here: http://api.jquery.com/scroll/

You can probably maintain a previous-top statement to determine direction of current scroll.

来源：https://stackoverflow.com/questions/12900744/auto-load-content-on-scroll-down