没有外部内容的无限滚动答案

【问题标题】：Infinite Scroll Without External Content没有外部内容的无限滚动
【发布时间】：2014-05-25 04:57:45
【问题描述】：

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

是否有任何插件或 sn-ps 可以帮助我实现这一目标？

例子：

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

然后重复..

任何帮助将不胜感激！

【问题讨论】：

为什么？与页面中的所有内容相比，无限滚动的唯一优势是它意味着您可以避免预先加载所有内容。把它拿走，你会让滚动条表现得很奇怪，没有任何好处。

标签： jquery html css scroll infinite-scroll

【解决方案1】：

试试这个（模式）

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

【讨论】：