Infinite Scroll Without External Content

问题

I am creating a blog in which I want more posts to load when the user scrolls to the bottom of the page. However, I do not want to use a jQuery plugin that pulls the content from another .html file. Instead I want to put all of the posts on one page and limit the amount that are visible then load a couple more as the user keeps scrolling down.

Are There any plugins or snippets that could help me achieve this?

Example:

     <-- Visible to users -->
     <article> Pretend this is a preview for an article on a blog</article>
     <article> Pretend this is a preview for an article on a blog</article>
     <article> Pretend this is a preview for an article on a blog</article>
     <-- End of Page -->

     <-- Infinite Scroll Load (Was Hidden Now Visible) -->
     <article> Pretend this is a preview for an article on a blog</article>
     <article> Pretend this is a preview for an article on a blog</article>
     <article> Pretend this is a preview for an article on a blog</article>
     <-- End of Page -->

And Repeat So..

Any help would be appreciated!

回答1:

Try this (pattern)

$(function () {
    $("body").css("height", $(document).height() + 1)
        .find("article").each(function (i, el) {
        $(el).not(":nth-last-of-type(n+4)").hide()
            .filter(":nth-of-type(4)").on("click.y", function () {
            $("body").animate({
                scrollTop: "0px"
            }, 1000)
        });
    });
    $(document).on("scroll", {
        "scrolled": false
    }, function (e) {
        if (!e.data.scrolled) {
            var el = $("article:nth-of-type(n+4)");
            $(el).show(1000);
            e.data.scrolled = true;
        };
        if (e.data.scrolled) {
            $(el).on("click", function (e) {
                $(e.target).hide(1000);
            });
        };
        if ($("article:nth-of-type(n+4)").css("display") === "none") {
            e.data.scrolled = false;
        };
        return false
    });
});

jsfiddle http://jsfiddle.net/guest271314/vTKpP/

来源：https://stackoverflow.com/questions/23005776/infinite-scroll-without-external-content