fullPage.jsを使用してInfinite-scroll.jsスクロール・スレッショルドが起動していません

Question

wordpressのテーマで無限スクロールをfullPage.jsと組み合わせようとしています。

フルページは大きな画面サイズでのみ初期化され、無限スクロールは小さな画面サイズで正常に動作します。無限スクロールでデバッグを有効にしていくつかのテストを実行した後は、フルページがアクティブなときにscrollThresholdが1に設定されていてもスクロールしきい値が起動されないようです。したがって、より多くのコンテンツを読み込むための呼び出しは行われません。これは、fullPageが初期化されていない場合、小さな画面サイズでもうまくいきます。

これらの2つのプラグインを組み合わせる正しい方法は何ですか？ - 最後のfullPageセクションに達したときに、どのように多くの投稿を読み込むことができますか？

var container = $('#bl-full-page'); 
//fullPage JS only on larger screens 
    if (windowWidth > 768) { 
     if(container.length) { 
     container.fullpage({ 
      sectionSelector: '.portfolio', 
      navigation: true 
     }); 
     } 
    } 

    if($('.pagination .next').length > 0) { 
     container.infiniteScroll({ 
     // options 
     path: '.pagination .next', 
     append: '.portfolio', 
     hideNav: '.pagination', 
     status: '.page-load-status', 
     debug: true, 
     }); 
    } else { 
     $('.page-load-status').hide(); 
    } 

    container.on('append.infiniteScroll', function(event, response, path, items){ 
     $('audio').mediaelementplayer(); 
     if ($('html').hasClass('fp-enabled')) { 
      $.fn.fullpage.destroy('all'); 
      container.fullpage({ 
      sectionSelector: '.portfolio', 
      navigation: true 
      }); 
     } 
    }); 
    container.on('last.infiniteScroll', function(event, response, path) { 
     $('.post-end').show(); 
    }); 

私はsage開発テーマを使用しているので、bowerを使用してフルページと無限スクロールがロードされています。 Here is a live webpage which is exhibiting the problem.

Answer 1

解決策が見つかりました。私はフルページafterLoadオプションを使用して、ユーザーが最後のセクションにいるかどうかを検出してから、infinitescrollのloadNextPageという名前を検出しました。私はその後、再初期化されたときに最後のセクションに全面移動しました。

var container = $('#bl-full-page'); 

    if($('.pagination .next').length > 0) { 
     container.infiniteScroll({ 
     // options 
     path: '.pagination .next', 
     append: '.portfolio', 
     hideNav: '.pagination', 
     status: '.page-load-status', 
     }); 
    } else { 
     $('.page-load-status').hide(); 
    } 

    //fullPage JS only on larger screens 
    if (windowWidth > 768) { 
     if(container.length) { 
     container.fullpage({ 
      sectionSelector: '.portfolio', 
      navigation: true, 
      keyboardScrolling: false, 
      afterLoad: function(anchorLink, index){ 
      // Section indexes in fullpage start at 1 
      if(index === $('#bl-full-page .portfolio').length){ 
       container.infiniteScroll('loadNextPage'); 
      } 
      } 
     }); 
     } 
    } 

    container.on('append.infiniteScroll', function(event, response, path, items){ 
     $('audio').mediaelementplayer(); 

     if ($('html').hasClass('fp-enabled')) { 

      //remembering the active section/slide 
      var activeSectionIndex = $('.fp-section.active').index(); 
      var activeSlideIndex = $('.fp-section.active').find('.slide.active').index(); 

      $.fn.fullpage.destroy('all'); 

      //setting the active section as before 
      $('.portfolio').eq(activeSectionIndex).addClass('active'); 
      container.fullpage({ 
      sectionSelector: '.portfolio', 
      navigation: true, 
      keyboardScrolling: false, 
      }); 
     } 
    });