How to integrate fullPage JS on a Webflow site
fullPage JS is an awesome library for creating fullscreen scrolling websites. It is fully functional on all modern browsers with touch support for mobile phones and tablets.
Please note: We have no affiliation with fullPage JS and advise you check out the licensing requirements as you may need to purchase a license depending on your intended usage. Full details can be found here.
Step 1:
Copy and paste this CSS code into the head of your page:
Tip: To avoid fullPage JS loading across your entire website, only paste this code into the relevant page setting custom code field.
Step 2:
Add this script before the closing body tag of your page:
Step 3:
Add a div and give it an id of fullpage
This will be the parent div wrapping your sections.
Step 4:
Add your sections inside the parent div and give them the class name of section
That’s it, now click publish and your site should be working with full page scrolling.
Optional:
Enabling Webflow scroll interactions
If you want to use Webflow scroll interactions, you will need to update the code as fullPageJS by default overrides the standard scrolling experience.
Step 1:
Replace the script we added earlier to the body
Tip: You can test that this worked by publishing and previewing your website. If it’s worked, the scroll bar will be visible again.
Step 2:
Hiding the scrollbar in Chrome
This step is optional and won’t impact scroll interactions, but we think it looks pretty great from a design perspective, so here’s how to hide the scroll bar on Chrome.
Add the following code inside the head tag of your page, making sure you have a class set on your Body element. (You may need to update .body below to match the class name you have given to your Body element).
Note: This will only hide the scroll bar on Chrome for desktop and mobile.
Now you can start adding your scroll interactions to make all kinds of wonderful and unique website experiences.
