ajax 调用 fullpage.js 后滚动不出现

Question

我正在使用 ajax 和 fullpage.js 来获取图库图像并在其上应用同位素，在我单击 link 打开图库（转到目标部分）之后页面滚动没有出现，我无法滚动，但如果我重新调整浏览器的大小，滚动就会出现..

/* HTML */

<div class="section" id="textscroll">
    <div class="s" data-anchor="stext">
        <div class="container">
            <div class="ajax_content"></div>
        </div>
    </div>
</div>

/* JS */

$('#fullpage').fullpage({
        anchors: ['home', 'about', 'gallery'],
        keyboardScrolling: false,
        autoScrolling: true,
        loopHorizontal: false,
        scrollOverflow: true,
        controlArrows: false
});

$('.gallery-link').on('click','a',function(){

      var url = "directory/gallery_ajax.php";
      var postid = $(this).attr('data-post');

      $('.loading').addClass('active');

          $.ajax({
             type : 'post',
             url  : url,
             data : {
                    action : 'user_clicked',
                    postid : postid
             },
             success : function( response ) {

                $('.ajax_content').html('<div class="content" id="gallery-container"><div class="isotope">'+response+'</div></div>');
                var $container = $('.isotope').isotope({
                       itemSelector: '.item',
                       masonry: {
                         columnWidth: 160,
                         isFitWidth: true
                           }
                    });
                    $container.imagesLoaded( function() {
                         $('.loading').removeClass('active');
                         $.fn.fullpage.moveTo(3,0);
                         $container.isotope( 'layout' );
                    });
             },
             error: function( message ){
                     console.log(message);
             }
          });
            return false;
});

Answer 1

在响应函数中调用“$('.ajax_content').htm”后，您需要再次初始化滚动插件，因为您更改了 dom 并且必须重新初始化插件才能计算新的页面尺寸

Answer 2

您可以使用：

$.fn.fullpage.reBuild();

文件Link

ajax 调用 fullpage.js 后滚动不出现

scroll not appear after ajax call fullpage.js

javascript

jquery

ajax

fullpage.js

slimscroll