Streaming live at 10am (PST)

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

@Nir are you using Firefox or Chrome?

Chrome.
seems like everything else works well, just that the scrollbar is still there.

Have you added the following to page head code (above the css for fullPage JS in clone)?

<style>
.body {
  /* These rules create an artificially confined space, so we get 
 a scrollbar that we can hide. They are not directly involved in 
 hiding the scrollbar. */

  border: none;
  padding: .5em;
  
  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.body{
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.body::-webkit-scrollbar { 
  /* This is the magic bit for WebKit */
  display: none;
}
</style>

Note, the Firefox scrollbar hide doesn’t seem to work anymore, not sure if anyone knows how to remove it using CSS??

Yup, I used your code from the clone.

Can you share preview link with me, I’ll take a look

https://preview.webflow.com/preview/numbers-85a700-c6d0583178672699d6cf21e3?utm_source=numbers-85a700-c6d0583178672699d6cf21e3&preview=044e59e175165698cc14c90f81b4dd79

Try adding class of Body to the body element, the code to hide scroll bar on chrome is calling on class of body so this needs to be set. Should work after this is added.

Magic @marsh :slight_smile:

Can confirm this script works perfectly with Scroll Into View interactions - we’ve got this going on our company website with scrollBar:true. Combine that with the CSS at the bottom of this thread, and you’re set.

Hi @Cjh
Can you share a cloneable link to this?

This btw works like a charm! Any way I can create buttons that will link to specific slides?

Hey! So I haven’t really been experiencing any issues at all or seen the need to add a faux wrapper of any kind with scroll based interactions using fullpage as long as scrollBar: true, and normalScrollElements: ‘#scrollable’ are added.

However, what about these same interactions being triggered when the arrow keys are being used or there’s a side navigation such as on the tesla.com website?

Any thoughts here?

I see that @marsh has it working on his example, but that the scrolling is super jittery for some reason.

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!