このコードを変更して表示されるようにするにはどうすればよいですか？

Question

<script> 
$(function() { 
    $(".griditem").slice(0, 12).show(); 
    $("#loadMore").on('click', function (e) { 
     e.preventDefault(); 
     $(".griditem:hidden").slice(0, 12).slideDown(); 
     if ($(".griditem:hidden").length == 0) { 
      $("#load").fadeOut('slow'); 
     } 
     $('html,body').animate({ 
      scrollTop: $(this).offset().top 
     }, 1500); 
    }); 
}); 
</script> 

このコードでは、より多くのdivをロードするためにボタンを押す必要がありますが、ボタンを押す必要がないようにスクロールするときに自動的に行う方法を教えてください。

http://codepen.io/anon/pen/KWMKZx

Answer 1

あなたがしたいポイントにいつでもユーザーがスクロールをチェックできるようにするには、スクロールイベントにイベントリスナーを添付することができます。ここで

var flag = true; 
$(document).scroll(function(){ 
    var st = $(document).scrollTop(); 
    var viewportHeight = $(window).height(); 
    var offset = $('#loadMore').offset().top; //You can change #loadMore for whatever element you want to fire the event when the user scrolls to. 
    if (st + viewportHeight > offset && flag){ //You can change the number 10. This means "When scrolled 10 pixels more than the top border of #loadMore" 
    $('#loadMore').trigger("click"); 
    flag = false; //This flag is just so that the click doesnt get triggered a lot of times unnecesary. 
    window.setTimeout(function(){flag=true;},200); 
    } 
}); 

はCode

Answer 2

はあなた `onClick`イベントハンドラの下に置くためです。この

function loadIt(){ 
    $(".griditem").slice(0, 12).show(); 
     $(".griditem:hidden").slice(0, 12).slideDown(); 
     if ($(".griditem:hidden").length == 0) { 
      $("#load").fadeOut('slow'); 
     } 
     $('html,body').animate({ 
      scrollTop: $(this).offset().top 
     }, 1500); 
} 
$(window).scroll(function(){ 
    if($(window).scrollTop() + $(window).height() > $(document).height() -20) { 
     loadIt(); 
    } 
});