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

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.