Can't scroll on section with height longer than viewport on mobile

[lonerunner]

$('#fullpage').fullpage({
        //Navigation
        menu: '#menu',
        lockAnchors: true,
        navigation: true,
        navigationPosition: 'left',
        showActiveTooltip: false,
        navigationTooltips: ['Home', 'Music', 'Videos'],
        slidesNavigation: true,
        slidesNavPosition: 'bottom',

        //Scrolling
        css3: true,
        scrollingSpeed: 700,
        autoScrolling: true,
        fitToSection: false,
        fitToSectionDelay: 1000,
        scrollBar: true,
        easing: 'easeInOutCubic',
        easingcss3: 'ease',
        loopBottom: false,
        loopTop: false,
        loopHorizontal: true,
        continuousVertical: false,
        continuousHorizontal: false,
        scrollHorizontally: false,
        interlockedSlides: false,
        dragAndMove: 'fingersonly',
        offsetSections: true,
        resetSliders: false,
        fadingEffect: true,
        scrollOverflow: false,
        scrollOverflowReset: false,
        scrollOverflowOptions: null,
        touchSensitivity: 15,
        normalScrollElementTouchThreshold: 5,
        bigSectionsDestination: 'top',

        //Accessibility
        keyboardScrolling: true,
        animateAnchor: true,
        recordHistory: false,

        //Design
        controlArrows: true,
        verticalCentered: true,
        paddingTop: '3em',
        paddingBottom: '10px',
        fixedElements: '#header, .footer',
        responsiveWidth: 0,
        responsiveHeight: 0,
        responsiveSlides: true,
        parallax: true,
        parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},

        //Custom selectors
        sectionSelector: '.section',
        slideSelector: '.slide',

        lazyLoading: true,

        //events
        onLeave: function(index, nextIndex, direction){},
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
        afterResponsive: function(isResponsive){},
        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
        onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
    });

Here's my code that i use right now for setting up fullpage but i am having problem on mobile device on one section which is actually larger than viewport height.

The section doesn't fit all on the screen, and when i swipe with my finger up or down on the screen it scrolls between sections normally but as i get to last section which is larger than screen i can only see what is on that screen and content below i can't scroll and see. On desktop works fine and in google developer tools, there is scrollbar and it can scroll up down.

But on mobile device (Using android and google chrome on FHD screen) there is no scroll bar and also pulling with fingers doesn't work. Also extension seem to steal default browser behavior and doesn't move address bar as it should.

You can see the first screenshoot is using fullpage.js and as you can see the url bar is still visible but it should disappear when you swipe with finger like in second screenshoot (this is default chrome behaviour on mobile) and also you can see Videos section is longer than viewport but i am unable to scroll down to see more of those videos.

[alvarotrigo]

Check in the docs the responsiveWidthand responsiveHeight options as well as the class fp-auto-height-responsive.

[alvarotrigo]

If you want to keep the autoScrolling behaviour, then check the scrollOverflow option. Example online.

[lonerunner]

I still can't get it to work, i even tried to copy complete code from your example you linked but somehow it fails when i switch everything into wordpress and wordpress theme. Now i get an error "IScroll is not defined"

[lonerunner]

So looks like i finally made it work, i am not sure but this can be actually some compatibility issue with WordPress probably.

I enqueued: jquery, bootstrap, wow, scrolloverflow, fullpage by that order but it started working actually when i manually initialized IScroll on "section" class before fullpage. So it seems it works now. On sections that are actually longer than viewport i can scroll and on sections that are not longer it works normally without scroll and it swipe to next section.

[mauroavello]

@lonerunner I'm having the same problem but with Laravel. I ended up testing it by downloading all of them using a CDN and I always get IScroll not initialized error. Finally, after loading jquery locally and then: `

` I managed to make it work, but I would like to load everything minified and copiled locally. Could you please explain what do you mean that you: > manually initialized IScroll on "section" class before fullpage. It is also not very clear what the other two options do: `scrollOverflowReset: false, scrollOverflowOptions: null,` Thanks in advance

[alvarotrigo]

It is also not very clear what the other two options do: scrollOverflowReset: false, scrollOverflowOptions: null,

Check the docs.

[lonerunner]

@mauroavello well on the website you have divided each section for fullpage scroll so the html would look like this on my website

 <div id="fullpage">
    <div class="section">
        My content
    </div>
    <div class="section">
        My content
    </div>
    <div class="section">
        My content
    </div>
</div>

So before calling fullpage in js file i call iScroll so my .js would look like this

 jQuery(document).ready(function($){
// this is per iscroll documentation minimal default settings
var myScroll;
function loaded () {
myScroll = new IScroll('.section');
}
$('#fullpage').fullpage({
//some default settings of fullpage
});
});

And it worked somehow.

@alvarotrigo i also find the docs a bit confusing, yes they are very extensive but somehow all that makes it confusing a bit.

[alvarotrigo]

@alvarotrigo i also find the docs a bit confusing, yes they are very extensive but somehow all that makes it confusing a bit.

If you don't know what an option does, just check it there. If you think there's something that is not clear, please specify what.