fullpage.jsでajax を使用してギャラリーの画像を取得し、同位体を適用しています。リンクをクリックしてギャラリーを開き (ターゲット セクションに移動)、ページのスクロールが表示されず、スクロールできませんが、ブラウザのサイズを変更すると、スクロールが表示されます..
/* 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;
});