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

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.

The problem actually had nothing to do with fullpage.js itself - it actually turned out to be an invalid plugin modification.

However as some others experienced this issue: Check any additional HTML, CSS and especially JavaScript as this is most likely to cause a problem.