I am currently working on a Fullpage.js instance that needs to be initialized with a click event and then destroyed when switching to another page, and vice versa. The scrollOverflow feature works perfectly as long as the #fullpage element is not hidden upon page load.
However, I have encountered an issue where the .fp-scrollable and .fp-scroller elements are not being created when the .fullpage-trigger is clicked and the #fullpage element is displayed and built.
You can see an example of this issue by visiting:
Thank you in advance for your help :)
$('.fullpage-trigger').on('click', function(event) {
$('#fullpage').fullpage({
anchors: ['1', '2'],
navigation: true,
navigationPosition: 'left',
navigationTooltips: ['1', '2'],
scrollOverflow: true
});
});
$(document).on('click', '.destroy', function(){
$.fn.fullpage.destroy('all');
$('#fullpage').removeClass('active');
$('#fullpage').addClass('hide-page');
});