Fullpage.js: Disable fullPage scrolling on mobile only

[anonet1]

Hi there,

Trying to "turn-off" fullPage on mobile only and have normal scrolling but wondering if there is any option for that?
I was trying to remove source for fullPage when less then 776px with javascript, but then it doesn't seem to be working on desktop.

[alvarotrigo]

Check the responsive options in the docs (responsiveHeight and responsiveWidth) as well as the fp-auto-height-responsive class in case you need it.

[alvarotrigo]

Responsive demo online

Demo with fp-auto-height-responsive

[anonet1]

Hmmm what if you want to turn off this slide scrolling and have normal scrolling on mobile?

@alvarotrigo

[alvarotrigo]

@anetk that's what the responsive options are for, as I said.

[majidzeno]

@anetk you can remove fullpage in mobile
if($(window).width() < 1024){ $('#fullpage').removeAttr('id'); }
NOTE:you have to write this code BEFORE starting fullpage.js

[katiachumakova]

@majidzeno didn't exactly work but tweaked it to start fullpage only on screen sizes above desired px width:

if($(window).width() > 1023){ 
$('#fullpage').fullpage(...)
}

[marekmaurizio]

I feel adding a class to multiple elements to disable something is a pretty bad design choice.

[alvarotrigo]

@marekmaurizio you are lucky then! fullPage.js is an open source project and you can contribute with your code an ideas 😄

[kirkbross]

Demo with fp-auto-height-responsive

Is the "responsive slides' extension the one I need to use fp-auto-height-responsive? (full screen scrolling >= x, normal scrolling, auto height <= x).

[alvarotrigo]

@kirkbross nope.
The extension is called "Responsive Slides". And its behaviour is explained in the the fullpage.js documentation:

responsiveSlides: (default false) Extension of fullpage.js. When set to true slides will be turned into vertical sections when responsive mode is fired. (by using the responsiveWidth or responsiveHeight options detailed above). Requires fullpage.js >= 2.8.5.

[HawkeyePierce89]

We need a disable option

const isPhone = Modernizr.phone; // https://github.com/hgoebl/mobile-detect.js

const options = {
    disable: isPhone ? true : false,
}

[alvarotrigo]

@HawkeyePierce89 why don't just use the destroy('all') function?

Or if you want to keep sections full height and some of the advantages of using fullPage.js such as lazyload, media autoplay/pause, bullet navigations or horizontal slides, why not using setResponsive(true)?

[alvarotrigo]

@HawkeyePierce89 or easier yet. If you dont want to use fullPage.js at all in an iphone, why don't just avoid initialising it when you detect an iPhone?

[marekmaurizio]

@marekmaurizio you are lucky then! fullPage.js is an open source project and you can contribute with your code an ideas 😄

If I contribute will the same code be used in the commercial version?

[alvarotrigo]

@marekmaurizio yeah of course. If your suggestions seems the way to go for it, it will go into fullPage.js code which is both open sourced and sold under a license, so everybody can benefit from it.

[ismail432]

Try it ...confirm it will work

[Ezra-Siton-UIX]

Update answer.

responsiveWidth option

new fullpage('#fullpage', {
     responsiveWidth: 900
});

Disabled under 900px (act like a normal page).

Example:
https://alvarotrigo.com/fullPage/examples/responsive.html 59

[Marius-Schwarz]

great, thanks for solving this. now I was wondering if it would be possible to still scroll-snap align (proximity) the start of the sections. thanks in advance.

[alvarotrigo]

Sure, just use the option fitToSection:true.

[saysonjerald]

note: this solution will work only for non-CDN CSS fullpage.css/fullpage.min.css
_disable fullPage scrolling and customize height_
open fullpage.css or fullpage.min.css and go somewhere to line 223 where you can find this code below,

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

and change the value toheight: inherit;

then use this on your javascript

new fullpage('#fullpage', {
     responsiveWidth: 768
});

then in order to customize the height on your mobile view, you must add this .fp-auto-height-responsive on each of your slides that you want to be customizable via your media query.

then go to CSS and add your media query

@media only screen and (max-width: 768px) {
      height: 500px !important; // <- 500 for example
 } 

[alvarotrigo]

@saysonjerald you don't actually need to modify anything :)
Just set the height to the content of the section/slide. For example

<div class="section fp-auto-height-responsive">
    <div class="content-wrappper">
         fasdfa
    </div>
</div>

@media only screen and (max-width: 768px) {
   .content-wrapper{
      height: 500px;
   }
}

[saysonjerald]

Yes, I tried that approach, but it's so weird why that fullPage.js is putting inline CSS on every slide that I have, like this one.

<section class="section section-resultDriven fp-auto-height-responsive fp-section active fp-completely" data-fp-styles="null" style="height: 676px;">
//my codes  here
</section>

again, I didn't putstyle="height: 676px;" inside the section tag. It just automatically generated. I don't know why so I modify the fullPage.css file so I can override this inline CSS which has a higher specificity.

[alvarotrigo]

but it's so weird why that fullPage.js is putting inline CSS on every slide that I have,

You shouldn't be worried about that inline css as it won't have any effect at all if you use fp-auto-height or fp-auto-height-responsive.

Modifying the CSS or the JS will only make it more difficult for you to:

• Update to future fullpage.js version
• Make sure you won't break anything with fullPage.js
• Make sure you won't break anything with fullPage.js extensions.

Usually, if you can avoid modifying a library, do it :)