没有外部内容的无限滚动 [英] Infinite Scroll Without External Content

问题描述

我创建了一个博客，当用户滚动到页面底部时，我想要加载更多帖子。但是，我不想使用从另一个.html文件中提取内容的jQuery插件。相反，我想把所有的帖子放在一个页面上，限制可见的数量，然后加载几个用户继续向下滚动。

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?

示例：

     <-- 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 -->

并重复此操作。

帮助将不胜感激！

推荐答案

尝试此模式

$(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/

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

这篇关于没有外部内容的无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！