Question

我试图在wordpress主题中将infinite-scroll.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开发主题，因此使用bower加载了fullPage和无限滚动。 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,
          });
        }
    });

无限卷轴.js滚动阈值不使用fullPage.js触发

1 个答案: