Infinite-scroll.js Scrollschwelle nicht ausgelöst mit fullPage.js

Question

Ich versuche unendlich-scroll.js mit fullPage.js in einem Wordpress-Theme zu kombinieren.

fullPage wird nur bei größeren Bildschirmgrößen initialisiert, und bei kleineren Bildschirmgrößen funktioniert der infinite scroll. Nach dem Aktivieren der Debugging-Funktion beim infinite scroll und dem Ausführen einiger Tests scheint der scroll-Schwellenwert nie ausgelöst zu werden, wenn die gesamte Seite aktiv ist (selbst wenn scrollThreshold auf 1 gesetzt ist). Daher wird der Aufruf, mehr Inhalt zu laden, nie gemacht - funktioniert wieder auf kleineren Bildschirmgrößen, wenn fullPage nicht initialisiert wurde.

Was wäre der richtige Weg, diese beiden Plugins zu kombinieren? - Wie kann ich mehr Posts laden, wenn der letzte FullPage-Bereich erreicht ist?

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

Ich benutze die Salbei-Entwicklung Thema und so FullPage und unendliche Bildlauf werden geladen mit Bower. Here is a live webpage which is exhibiting the problem.

Answer 1

Ich habe eine Lösung gefunden. Ich benutzte die Vollseite afterLoad Option, um festzustellen, ob der Benutzer im letzten Abschnitt ist und dann infinitescroll loadNextPage aufgerufen. Ich habe dann die gesamte Seite in den letzten Abschnitt verschoben, wenn sie neu initialisiert wird.

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