Fullpage.js and mobile devices: How to enable section / slide switch if content overflow must be enabled?

Question

After experimenting with some of the options I still did not get satisfying result:

The used Javascript library is FullpageJS (http://alvarotrigo.com/fullPage/)

Fullpage.js is initialized with the following settings:

$('#fullpage').fullpage({
   sectionsColor: colors,
   anchors: anchors,
   scrollOverflow: true,
   afterSlideLoad: function() {
      startTheSliders();
   },
   onLeave: function(index) {
        setTimeout(function() {
            $.fn.fullpage.scrollSlider(index,0);
        },1000);
   }
});

Important: According to the documentation scrollOverflow:true is set (and must be set to true), because especially on mobile devices the content of a slide is sometimes higher than the screen height.

However it is absolutely required that users can switch horizontally and vertically between the slides with the finger (not navigation). Intended behaviour is as follows:

1. Horizontal switch switch slide if the finger moves left or right

2. Vertical switch slide: Next bottom slide only if slide is scrolled to the bottom and finger moves down. Next top slide: Only if slide is scrolled to the top and finger moves up.

The (former) dev project can be found here: http://www.studiodankl.com/

Answer 1

I would not recommend you to use scrollOverflow for mobile devices.

If you want a real responsive site you should adapt the content to the device and not made use of "hacky" scroll bars to fit the content.

You can make use of the class fp-auto-height on the sections in which your content will be overflowing on mobile devices. You should only add it when your site gets responsive, this is, under certain width or height limits.

This way those sections will be able to be bigger than the device viewport.

Combining that with the responsiveHeight or responsiveWidtdh options of fullpage.js (that set autoScrolling:false) you will be able to have a pretty responsive site on small screen devices.

As an example you can take a look at this site using fullpage.js using a small viewport. It is not using the fp-auto-height option but the result is exactly the same.

In that case the site us using this:

/*screen resolutions smaller than 950px height*/
@media (max-width: 950px){
    #section3.fp-section,
    #section3 .fp-tableCell{
        height: auto !important;
        min-height: 100%;
    }
}

Which is pretty similar to what fullpage.js uses for fp-auto-heigh:

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
    height: auto !important;
}

UPDATE

fullpage.js provides now the class fp-auto-height-responsive for this same purpose. More in the docs.