Fullpage.js: Set scrollOverflow class to only apply on certain sections?

[Bondra]

Hi!

I wonder if it's possible to set the scrollOverflow to only apply on a certain element/section using a class? To make a long story short.

If content is larger than viewport scrollOverflow is activated

Even if content is larger than viewport scrollOverflow will be disabled

[meceware]

I think Alvaro might give a better answer but you can add fp-noscroll class to the sections to disable scrollbars on certain sections.

[alvarotrigo]

@meceware that's right! +1 for you! As fp-noscroll is not yet documented!
I'll mark the topic as a document enhancement!

<div class="section fp-noscroll"></div>

You can apply it to slides too.

[Bondra]

Thanks for the respons!

I've added the fp-noscroll class to my start section but still get a scroll on the section.

<section class="start section fp-noscroll"> <img src="image.jpg" style="height:4000px"> </div>

scrollOverflow: true, scrollOverflowOptions: { scrollbars: true, mouseWheel: true, hideScrollbars: false, fadeScrollbars: false, disableMouse: true },

[alvarotrigo]

@Bondra sorry can't help more without an isolated reproduction in jsfiddle or codepen. Please provide one if you believe its a fullpage.js bug.

[alvarotrigo]

Working as expected as you can see here

[Bondra]

That's true! With this I got a question regarding the behavior. Instead of scrolling through all content that exists in the section rapidly, is it possible to scroll the section just like a normal fullheight section?

[alvarotrigo]

That has nothing to do with fullpage.js. Use CSS absolute positioning for that .

[Bondra]

Okey! I know why I don't got it to work in the first place though. I had multiple slides within the section. It didn't seem to work combined with the fp-scroll.

<div class="section fp-scroll"> <div class="slide"> <img src="image.jpg" style="height:4000px"> </div> <div class="slide"><img src="image.jpg" style="height:4000px"> </div> </div>

[alvarotrigo]

Added to the docs.