窗口调整大小后，fullpage.js仅会滚动溢出

Question

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), for it to be a scrollable section.

The problem is it refuses to scroll. However, if I resize the window (even by a single pixel in any direction), then the fullpage.js scrollbar will appear for that section.

Does anyone have any idea why fullpage.js is acting this way? And how can I get the scrollbar to appear in that section without having the resize the window manually?

It's worth noting, I've been able to get the same thing working using the fullpage.js example page for scrollOverflow. That is setup right here . However, I haven't been able to figure out why it works there, but not in my original page!

Answer 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);