如何在進入視圖時更改此代碼以使其滾動？

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> 

有了這一點的代碼，它目前需要你按下一個按鈕來加載更多divs，但是當滾動到視圖時如何使它自動執行，所以你不必按下按鈕？

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

Answer 1

您可以將事件偵聽scroll事件，這樣你可以檢查當用戶滾動到時候你想。

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

試試這個

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(); 
    } 
});