외부 콘텐츠가없는 무한 스크롤

Question

사용자가 페이지 맨 아래로 스크롤 할 때 더 많은 게시물을로드하고 싶은 블로그를 만듭니다. 그러나 다른 .html 파일에서 내용을 가져 오는 jQuery 플러그인을 사용하고 싶지 않습니다. 대신 모든 게시물을 한 페이지에 넣고 표시되는 양을 제한하고 사용자가 스크롤을 계속하면서 몇 개 더로드하려고합니다.

이 작업을 수행하는 데 도움이되는 플러그인 또는 스 니펫이 있습니까?

예 :

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

그리고 반복 .. 어떤 도움을 주시면 감사하겠습니다

!

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