By default, fullPage.js assumes that you want to disable fullPage.js snap scroll feature on small screen devices. This is what usually most people want and what makes things easier for developers. However, you can also use fullPage.js autoScrolling feature on responsive mode and enjoy some of the responsive mode features, such as making use of the Responsive Slides extension that turns horizontal slides into vertical sections.

So, how do we do this?

We first have to define when to enter into responsive mode by using the fullpage.js options responsiveWidth or responsiveHeight. When the viewport size is smaller than the value in pixels defined in those breakpoints, then fullPage.js will enter into the responsive mode, which will automatically disable the snap scroll. Now, it will scroll normally like any other page.

If you want to keep the snap scroll feature while on responsive mode, then use the method fullpage_api.setAutoScrolling(true) inside the afterResponsive callback. 

Here's an example:

new fullpage('#fullpage', {
  licenseKey: 'YOUR KEY HERE',
  
  responsiveWidth: 1000,
  afterResponsive: function(isResponsive){
    if(isResponsive){
      fullpage_api.setAutoScrolling(true);
    }
  }
});

Demo online and codepen here:

See the Pen fullPage.js - Responsive mode using snap scroll with autoScrolling:true by Álvaro (@alvarotrigo) on CodePen.

 

You might also find these articles relevant:

• How to disable fullpage.js in mobile devices
• Make an element scrollable inside a fullpage.js section or slide
• Make a section scrollable in fullpage.js using scrollOverflow
• How to delay scroll & wait until animation is done on fullPage.js
• Why my scroll based animations or events don't work?