使用 fullPage.js 未触发 Infinite-scroll.js 滚动阈值

Question

我正在尝试在 wordpress 主题中将无限滚动.js 与 fullPage.js 结合起来。

fullPage 仅在较大的屏幕尺寸上初始化，无限滚动在较小的屏幕尺寸上工作正常。在无限滚动中启用调试并运行一些测试后，当整个页面处于活动状态时似乎从未触发滚动阈值（即使 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();
    });

我正在使用 sage 开发主题，因此 fullPage 和无限滚动正在使用 bower 加载。 Here is a live webpage which is exhibiting the problem.

Answer 1

我找到了解决方案。我使用 fullpage afterLoad 选项来检测用户是否在最后一个部分，然后调用无限滚动的 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,
          });
        }
    });