Fullpage.js Will Only Scrolloverflow After Window Resize

I have a fullpage.js site setup here. The first section has no scrollOverflow, but the second section is a grid (generated using gridify), which requires (on certain screen sizes),

Solution 1:

That's probably because the content of your section or slide is being generated (or modified somehow) after fullPage.js gets initialized.

You should have used that javascript code inside the afterRender callback as fullPage.js documentation details:

afterRender()

This callback is fired just after the structure of the page is generated. This is the callback you want to use to initialize other plugins or fire any code which requires the document to be ready (as this plugin modifies the DOM to create the resulting structure).

In any case, I believe you can solve it by calling the method reBuild provided by fullPage.js. You can try to use it in the afterRender callback or directly after the code you use to generate the layout/content of the section to which you want to apply the scrollOverflow option.

$('#fullpage').fullpage({
    //your options
});

//code used to generate the content of your section //...//re-building fullPage.js to detect the current content of each section
$.fn.fullpage.reBuild();

If that doesn't work, you can always try to use a timeout which should also solve it with some delay:

setTimeout(function(){
    $.fn.fullpage.reBuild();
}, 1000);