Fullpage.js: scrollBar:true

[wirkoenntenaber]

The scrollbar is showing here, but then disappearing shortly after opening a site with fullpage.js, while shifting the whole page content by that width. What can I do to prevent this? Thanks in advance.

[alvarotrigo]

See my answer here:
https://github.com/alvarotrigo/fullPage.js/issues/3425#issuecomment-425107252

[wirkoenntenaber]

Thank you for the link – that's pretty in-depth bugfixing, but shouldn't "scrollBar: true" just be working out of the box?

I am using a licensed version of fullpage.js along with webflow, because I don't have much coding knowledge. As per your webflow tutorial, I created a div with the id "fullpage", within that a div classified as "section" and within that two divs classified as "slide". I can't tell where the problem is?

[alvarotrigo]

Ah, sorry I think I misunderstood the issue.
So you basically want to show the scroll bar by default?

Easy, then just use scrollBar:true when initialising fullpage.js.
See an online example here:
https://alvarotrigo.com/fullPage/examples/scrollBar.html

And the code for it on the examples folder:
https://github.com/alvarotrigo/fullPage.js/blob/master/examples/scrollBar.html

More info on the the fullpage.js documentation

[wirkoenntenaber]

Thanks for the answer. I want to show it by default as a workaround due to the content twitching, when initialising fullpage.js on pageload. I am aware of the option "scrollBar: true", but it doesn't work for reasons I don't understand.

[alvarotrigo]

You might be using some css that conflicts with it. Like for example html,body{ overlfow: hidden;}.

Unfortunately we do not check external websites on this forum, only isolated reproductions on jsfiddle or codepen. So unless you can provide an isolated reproduction of your issue there's not much we can do about it.

If you need premium support so we can investigate your specific use case you can consider getting the Business license from the fullpage.js pricing page.

[wirkoenntenaber]

Thank you. Maybe you could explain how I can prevent the content from twitching by the width of the scrollbar, when initializing fullpage.js on pageload? Enabling the scrollbar by default would've been a workaround to this initial problem.

In your cloneable webflow project the problem also does occur, which I wasn't aware of.

[alvarotrigo]

Just use html,body{ overlfow: hidden;} css if you want to hide the scroll bar by default.

[wirkoenntenaber]

Wow, that was easy. Thank you!