infinite-scroll.js 스크롤 임계 값이 fullPage.js를 사용하여 트리거되지 않았습니다.

Question

저는 wordpress 테마에서 infinite-scroll.js와 fullPage.js를 결합하려고합니다.

전체 화면은 더 큰 화면 크기에서만 초기화되고, 무한 스크롤은 작은 화면 크기에서 제대로 작동합니다. 무한 스크롤에서 디버그를 활성화하고 일부 테스트를 실행 한 후에는 scrollThreshold가 1로 설정되어 있어도 전체 페이지가 활성화되어있을 때 스크롤 임계 값이 트리거되지 않는 것처럼 보입니다. 따라서 더 많은 컨텐츠를로드하라는 요청은 결코 발생하지 않습니다. fullPage가 초기화되지 않은 경우 작은 화면 크기에서도 다시 작동합니다.

이 두 플러그인을 결합하는 올바른 방법은 무엇입니까? - 마지막 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(); 
    }); 

저는 현자 개발 테마를 사용하고 있으므로 전체 페이지와 무한 스크롤은 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, 
      }); 
     } 
    });