Streaming live at 10am (PST)

Fullpage.js Lets solve this once and for all together!

Hi. Has someone found how get interactions work with scrollbar:false? Because ScrollOverflow does not work with scrollbar:true. Big fail that if you need normal scroll in big sections (with big content) - scrollbars of main webpage and bigsections scrollbar are conflict. I cant understand why people dont ask this question :\
Has anyone found a solution?

I’m not quite sure what interactions you want to use or how are you planning to fire them, but as long as you use the fullpage.js option scrollBar:true, any interaction fired by the scroll event of the site (not the mousewheel / trackpad event) should work as expected.

Has anyone found a solution?

It doesn’t seem to be that Webflow provides any way to trigger interactions/animations by using a CSS class condition (which is quite common when working with CSS/JS).
It can however be done by getting your hands dirty with the fullpage.js component features :slight_smile:

You would need to make use of the CSS state classes added by fullPage.js in the body and section elements or the fullPage.js callbacks.

You can find a tutorial I recorded some time ago on how to use fullPage.js state classes to fire CSS 3 animations here:
https://www.youtube.com/results?search_query=css3+fullpage

And you can find an example of animations using fullpage.js callbacks here:
https://alvarotrigo.com/fullPage/examples/apple.html

And here:

So basically, you will have to rather use custom CSS or custom JS code combined with CSS.
And of course, have some basic knowledge of both technologies: CSS and JS.

I might record another video talking about this if you guys really need one.

I’ve just cloned your project, and it flickers in chrome when scrolling between sections :confused: So does your own example.

@Volander who’s project are you referring to?
It might be because they are using an old version of fullPage.js. Version 2 stop being maintained in 2018 and it contain some bugs, one fo them, when using it combined with scrollBar:true.

I would recommend you to try the latest version.
You can clone the official showcase here:

Tell me how to use the “scrolloverflov” Scrolling inside sections Please!! :slightly_frowning_face:

@Aleksey just use the option scrollOverflow:true in the fullPage.js options.
You can see how to use those options in my video tutorial here:

1 Like

It’s working now - perfect, thank you! :grinning:

Hi @Volander, thanks for sharing. The original project has been updated to use the latest version of fullpage.js now, so this bug is no more!