scrollOverflow / slimScroll not working properly in fullPage.js

aslashi picture aslashi · Mar 4, 2014 · Viewed 8.5k times · Source

This is the sequel of this thread.

On one page of the website I'm building for a client, both fullpage navigation and scrolloverflow/slimscroll work fine.

On another page, fullpage nav works but the overflow is not scrolling. Looks like the two divs with the class .slimScrollDiv and .scrollable are not being created as expected. Here's the jsfiddle ; the scrollOverflow is set to true yet the overflow of the second section does not scroll.

$.fn.fullpage({
    scrollOverflow: true
});

Answer

Alvaro picture Alvaro · Mar 5, 2014

You are having troubles because the class .infotext wrapping your table is defined with position:absolute. This way the plugin can not detect the height of the section content and therefore I doesn't realize it has to create the scrollbar.

Use position:relative instead and the problem will be solved:

Live demo

Using an absolute positioned element doesn't make much sense as it will be relative to the section as if you were using a relative positioned one.