What code and linking is missing to make a text section scrollable with fullpage.js in Webflow for the mobile version of the website?

Published on
September 22, 2023

To make a text section scrollable with fullpage.js in Webflow for the mobile version of the website, you need to add some code and make a few modifications. Here's what you need to do:

  1. Install fullpage.js: First, you need to include the fullpage.js library in your Webflow project. You can download the library from the fullpage.js website and add it to your project's custom code section. Alternatively, you can use a CDN link to include the library directly in your project.

  2. Set up the sections: In Webflow, create a section for your text content. This will act as the container that holds the scrollable text. Make sure to set the section's style to "overflow: hidden" in order to hide the scrollbar.

  3. Insert a div block: Inside the section, insert a div block to hold the text content. This div block will be the scrollable element. Give it a class name or an ID for easier targeting in the custom code.

  4. Add the necessary custom code: Open the custom code panel in Webflow and add the following code:

$(document).ready(function() {  $('#your-div-block').fullpage({    scrollOverflow: true,    scrollOverflowOptions: { click: true },    responsiveWidth: 768, // Adjust this value to match your mobile breakpoint  });});

Make sure to replace 'your-div-block' with the class name or ID of the div block you inserted in step 3.

  1. Mobile breakpoints: By default, fullpage.js will take effect for all screen sizes. If you only want it to work on the mobile version of your website, you need to set a specific responsive width in the code. In the example code above, '768' represents the mobile breakpoint width in pixels. Adjust this value based on your design and responsive breakpoints.

  2. Publish and test: Once you've added the code, publish your Webflow project and test the scrollable text section on a mobile device. It should now scroll properly using fullpage.js.

By following these steps and adding the necessary code and modifications, you can make a text section scrollable with fullpage.js in Webflow for the mobile version of your website.

Additional Questions:

  1. How do I install fullpage.js in Webflow?
  2. Can I customize the appearance of the scrollbar in a fullpage.js section in Webflow?
  3. Is it possible to have multiple scrollable sections on the same page using fullpage.js in Webflow?