Scrollbar on active slide for overflowing content with Fullpage.js

Question

Im using Fullpage.js and trying to make it work with wordpress, and its going forward. However, I'm trying to figure out how to be able to scroll trough a slide with content higher then the active slide. The plugin comes with a scroll overflow function, but that vill make a scrollbar that scrolls trough your content, and keeps going to the next slide.

Ideally a constant scrollbar that stops at the current slide would be the best option for me, but i dont know if this is possible.

Been fiddling with this for a while, so if anyone has any ideas how to solve this i would be thankful. My site:

http://www.svenssonsbild.se/Fullscreen/

Edit: Realize that what i want should be able to achieve by setting scrolloverflow: true in the plugins setting. Just didnt realize it didnt work for me.

So, if anyone hav any ideas why it wont work for me then it would be great. I suspect it have something with having the scripts hardcoded in the header and not enqueued, which i havent been able to figure out how to, since the supercontainer the script creates duplicates.

anyhow, any pointers will be very appriciated.

Answer 1

I struggled with this myself, then went to read through the documentation again. Here what it states:

• scrollOverflow: (default false) defines whether or not to create a scroll for the section in case its content is bigger than the height of it. In case of setting it to true, it requieres the vendor plugin jquery.slimscroll.min and it should be loaded before the fullPaje.js plugin. For example:

<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>

Not loading SlimScroll.js was the issue here.

Then set your $.fn.fullpage({ }) config accordingly.

$('#fullpage').fullpage({
    scrollOverflow: true
});

Answer 2

Just to add a little info that mighht help out others, I've been using both plugins (fullpage.js and slimscroll.js) but found issues with slimscroll when using it on mobile devices (momentum and lag issues).

It is possible to set scrollOverflow to false and add this next bit to the afterSlideLoad function to get native scrolling if content is too long:

$('.slide .active').css('overflow-y','auto');