-
Notifications
You must be signed in to change notification settings - Fork 7.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Disable fullPage scrolling on mobile only #3109
Comments
Check the responsive options in the docs (responsiveHeight and responsiveWidth) as well as the More about it turning off fullpage.js on mobile or tablet devices here. |
Hmmm what if you want to turn off this slide scrolling and have normal scrolling on mobile? |
@Anetk that's what the responsive options are for, as I said. |
@Anetk you can remove fullpage in mobile |
@majidzeno didn't exactly work but tweaked it to start fullpage only on screen sizes above desired px width:
|
I feel adding a class to multiple elements to disable something is a pretty bad design choice. |
@marekmaurizio you are lucky then! fullPage.js is an open source project and you can contribute with your code an ideas 😄 |
Is the "responsive slides' extension the one I need to use fp-auto-height-responsive? (full screen scrolling >= x, normal scrolling, auto height <= x). |
@kirkbross nope.
|
We need a const isPhone = Modernizr.phone; // https://github.com/hgoebl/mobile-detect.js
const options = {
disable: isPhone ? true : false,
} |
@HawkeyePierce89 why don't just use the 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 |
@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? |
If I contribute will the same code be used in the commercial version? |
@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. |
Try it ...confirm it will work <script> if (screen && screen.width > 768) { document.write('<script type="text/javascript" src="http://your-file-path/fullpage.js"><\/script>'); } </script> |
Update answer. responsiveWidth option
Disabled under 900px (act like a normal page). Example: |
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. |
Sure, just use the option |
note: this solution will work only for non-CDN CSS fullpage.css/fullpage.min.css
and change the value to then use this on your javascript
then in order to customize the height on your mobile view, you must add this then go to CSS and add your media query
|
@saysonjerald you don't actually need to modify anything :) <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;
}
} |
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.
again, I didn't put |
You shouldn't be worried about that inline css as it won't have any effect at all if you use Modifying the CSS or the JS will only make it more difficult for you to:
Usually, if you can avoid modifying a library, do it :) |
@alvarotrigo Hi! How to disable scroliing in react mobile version. I tried |
@Anu-Ujin that should turn fulpage.js auto scrolling off when the height of your mobile device is less than 600px width. And make sure to also add this on the HTML header part. <meta name="viewport" content="width=device-width,initial-scale=1"> You have a full article with demos here: |
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.
The text was updated successfully, but these errors were encountered: