If you want to turn off fullPage.js scrolling on mobile devices you will have to use the responsiveWidth
or responsiveHeight
options on the fullPage initialization. (Using WordPress?)
Remember, nowadays there's no such thing as a "mobile" device anymore. There are touch screen computers with high resolutions, and touch screen tablets with higher resolution than some computers.
So, the way to deal with small screen devices is dealing with resolution thresholds.
Here's an example of how to disable fullPage.js for devices with less than 800px width:
new fullPage('#fullpage', {
responsiveWidth: 800
});
This way your page scroll will be fully controlled by fullPage in normal conditions, meaning it will scroll snap to sections and adjust them so they will always fit the viewport.
However, if the resolution is lower than 800px width fullpage.js auto snap behavior will get disabled and you'll be able to scroll as you usually do on any website.
Note that you might want to use the viewport
meta tag on your HTML header part so it will be zoomed accordingly. Check out more about the viewport meta tag here.
<meta name="viewport" content="width=device-width,initial-scale=1">
Turning off full-height sections
You might also want to have sections that are smaller or bigger than the viewport on those same devices where you disabled fullpage. No problem!
Add the class fp-auto-height-responsive
on those sections where you want to disable full-height and they will take the height defined by your section/slide content.
Here's an example:
<div class="section">Whole viewport</div>
<div class="section fp-auto-height-responsive">Auto height only on responsive</div>
Check out this codepen example.
Additional styles on responsive
In addition, fullpage.js will automatically add the class fp-responsive
on the body
element of the site when you enter into responsive mode. Meaning, when we reach a width/height lower than the threshold we defined on fullPage initialization.
This way we can use this class instead of creating media queries if we prefer.
For example:
.section1{
background: red;
}
/* Applied only on responsive */
body.fp-responsive .section1{
background: yellow;
}
Detecting mobile mode on JavaScript
When entering into the responsive mode fullPage will also trigger a callback that we can use to add our own logic on the JavaScript side:
new fullpage('#fullpage', {
afterResponsive: function(isResponsive) {
if (isResponsive) {
console.log("I'm in responsive mode");
}
}
});
Disabling fullPage.js on Mobile on the WordPress plugins
The procedure is just the same, but in this case you'll be able to do it all from the WordPress panel.
It's as easy as adding a value in pixels on the Responsive Width option. For example 750
(or any other threshold you prefer). So, in this example, when the viewport X dimension (the window width, or the screen width of the mobile device) is less than 750px, your page will behave as a normal scrolling website without fullPage.js snap scroll.
To turn off full-height sections, check out the Responsive Auto-Height option for the sections.
You might also find these articles relevant: