Fullpage.js: Add 'scrollOverflow:false' while responsive.

[partynikko]

I would like to use fullPage.js and it's autoScrolling feature on my site but there's one thing making me not using it.

When using 'responsive: value' the 'autoScrolling' feature is being turned off. The problem is that the 'scrollOverflow' feature remains unchanged from original.

Would it be possible to turn off 'scrollOverflow' when 'responsive: value' is triggered? The reason I would like to do that is because I don't want to scroll within the '.section' in responsive mode, I just want it to act normal just like as if 'scrollOverflow' was turned off.

So basically;
How do I turn off 'scrollOverflow' when 'responsive' is triggered? It's very much needed for my design and I think it could be helpful for other too.

I would like fullPage.js with the features 'autoScrolling' and 'scrollOverflow' to be enabed above the responsive breakpoint. But when 'responsive' triggers I want 'autoScrolling' and 'scrollOverflow' turned off, both of them.

Thanks in advance

[alvarotrigo]

This issue is directly related with this other one.

And not easy to solve. slimScroll.js is not perfect and fullPage.js might stop working it in a near future. Maybe changing to iScroll.js, although this one is more heavy.

[goldtoothlogoose]

Hi Alvaro,

You've mentioned in other threads that if we add the following code, slimscroll won't be needed:

.fp-section{
     height: auto !important;
}

I've tried this multiple ways, however slim scroll still fires, and the sections still scroll. I cannot get the sections to extend beyond the height of the browser. Here is my js code:

$('#fullpage').fullpage({

resize: false,
scrollOverflow: true,
    anchors: ['home', 'about', 'work', 'fill1', 'fill2', 'contact'],
    menu: '#section_links',
    responsive: 1024 

});

Here is my css:

@media only screen and (max-width: 1024px) {

.fp-section{
    height: auto !important;
}

}

Is there anything else I need to be doing? My css file css is being included after the jquery.fullPage.css file.

[alvarotrigo]

@spindiesel as I said in my previous post, it is not easy to solve.

[richgcook]

@alvarotrigo @spindiesel Any news on this?

[alvarotrigo]

@richgcook yeah. About to be solved thanks to @jnettik. Probably merged in the minified slimscroll for the next released.

[richgcook]

@alvarotrigo Any way to get this now?

[alvarotrigo]

@richgcook if you really need it now, contact me.

[richgcook]

@alvarotrigo I'm the guy who emailed you... thanks.

[welyanto]

i have the same issue for deleting or removing the scroll on my responsive before, after do some research this can works on me, maybe this can help for you to guys.

if (document.documentElement.clientWidth > 1023) {
    $('#fullpage').fullpage({
        // we need to enable scrolling on desktop version
        scrollOverflow: true
        // the rest setting can goes below here
    });
}
if (document.documentElement.clientWidth < 1024) {
    $('#fullpage').fullpage({
        // we need to disable scrolling not on desktop version
        scrollOverflow: false
        // the rest setting can goes below here
    });
}

[alvarotrigo]

As the problem related with this issue was solved, I'll open it again now that it is possible to find a solution for it.

[reddo]

Is there a viable solution for this as of now? I'd like to disable scrollOverflow while window is smaller than responsiveWidth. By the way, I'm using the dev version together with iScroll.

[alvarotrigo]

@reddo nop. That's why the topic still open.

[reddo]

I had an idea:
When you check if scrolloverflow needs to be added, also check if the window width is larger than or equal to responsiveWidth and only add it if true. I've found 2 instances of this check, on lines 407 and 579 (of the dev version).

In my case, I also had to remove the inline style applied to my sections so the content doesn't overflow.

It's working ok when I initially load the page on a small screen and resize from there, but it's not working as I wanted when I initially load the page on a larger screen and resize to smaller. I'd want it to unwrap my sections from the generated .fp-scrollable and .fp-scroller. Any suggestions how to do this?

[reddo]

Sorry to bother you again, do you have any ideas on the last part of my last comment?

[alvarotrigo]

Not really.

[alvarotrigo]

Fixed in 2.8.0.

[syampolskiy]

it still does not work, I have default scrollbar and iScroll together on small devices. maybe I have incorrect options for plugin?

$('#block_for_scroll').fullpage({
        menu: ".nav_list",
        anchors: ['theplatform', 'yourbenefits', 'testimonies','contactus'],
        scrollOverflow: true,
        paddingTop: '130px',
        responsiveWidth: 991,
        scrollOverflowOptions: {
            scrollbars: true,
            mouseWheel: true,
            hideScrollbars: false,
            fadeScrollbars: false,
            disableMouse: true,
            interactiveScrollbars: true
        }
    });

[alvarotrigo]

it still does not work,

You are right. The problem behind the impediment for this this was solved, but the feature was not yet implemented as you can see in this reproduction online.

I'll keep it open until I add the feature in the next release.

[faliqaiman]

$(document).ready(function() {
    $('#fullpage').fullpage({
        sectionsColor : ['#111', '#333', '#555', '#777'],
        responsiveWidth: 480,
        responsiveHeight: 480
    });
});

Why when I adjust the width and height to 480px, it's not reflected on the mobile? But when I set it to responsiveWidth: 1000, it's goes well. My plan is to have both height and width so when user using the mobile in portrait or landscape mode, fullpage function won't runs. Or should I just use destroy for this one? Pls advise. Thanks.

[faliqaiman]

I try with fullpage.js ver2.7.5 and responsiveWidth function is okay. This the latest version is not support the responsiveWidth?

[Akkuolina]

I solved so simply, if you can help:

// before running the fullpage
var scrolloverflowed;
if ($('#fullpage').width() < 1024) { // check the width (or window.width() or other method)
scrolloverflowed = false;
} else {
scrolloverflowed = true;
}

// fullpage init
$('#fullpage').fullpage({
...
...
scrollOverflow: scrolloverflowed,
...
...
});

_Akkuolina_

[GustavSt]

Any updates on this? Will this issue be solved with the next release?

[alvarotrigo]

@GustavSt nop.

[Akkuolina]

Peccato!
However, I have resolved with the solution that I have proposed (up)

Alvaro compliments!!! :)

[GustavSt]

I did do it that way. And in order for it to work for users resizing their browser window I destroyed fullpage and recreated it when afterResponsive is triggered. That event is not documented by the way!

[alvarotrigo]

That event is not documented by the way!

True. Introduced in the previous release :)

[facundosegura]

Hello GustavSt
Soy novato en esto, Quisiera saber como se escribe el código:

// before running the fullpage
var scrolloverflowed;
if ($('#fullpage').width() < 1024) { // check the width (or window.width() or other method)
scrolloverflowed = false;
} else {
scrolloverflowed = true;
}

// fullpage init
$('#fullpage').fullpage({
...
...
scrollOverflow: scrolloverflowed,
...
...
});

muchas gracias!!

[Akkuolina]

Hello GustavSt
Soy novato en esto, Quisiera saber como se escribe el código:

Hi facundosegura,
I'm not GustavSt, You have mistaken person :)
Anyway ... if you follow the Alvaro's guide, you'll find the exact point in which to include the code that I had reported up.

Greetings...
A.

[facundosegura]

Hola Akkuolina
Soy novato en esto, Quisiera saber como se escribe el código completo:
// before running the fullpage
var scrolloverflowed;
if ($('#fullpage').width() < 1024) { // check the width (or window.width() or other method)
scrolloverflowed = false;
} else {
scrolloverflowed = true;
}

// fullpage init
$('#fullpage').fullpage({
...
...
scrollOverflow: scrolloverflowed,
...
...
});
Porque sí no funciona.
muchas gracias!!

[Akkuolina]

Hello facundosegura,

You can refer to any example of fullpage, for example:
https://github.com/alvarotrigo/fullPage.js/blob/master/examples/demoPage.html

At line 58, you can replace all the code in $(document).ready with this below:

$(document).ready(function() {
    var scrolloverflowed;
    if ($('#fullpage').width() < 1024) { // check the width (window.width() or other method)
        scrolloverflowed = false;
    } else {
        scrolloverflowed = true;
    }
    $('#fullpage').fullpage({
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
        anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
        menu: '#menu',
        scrollingSpeed: 1000,
        scrollOverflow: scrolloverflowed,
    });
});

Bye bye
Akkuolina

[facundosegura]

Gracias Akkuolina, pero no funciona en ios en ipad, cuando el texto es largo no scrola
alguna solución?

[meceware]

Hi,

The javascript workaround mentioned here actually did not help for me, since when the orientation changes, scroll overflow does not work even if it should work. (Like on tablets)

Instead of a javascript call, I added some CSS to disable overflow scroll when the page is responsive. I

/* Change 965 to the number you put as responsive */
@media (max-width:965px)
{
    /* Disable scroll overflow by changing height */
    .fp-auto-height-responsive > .fp-scrollable {
        height: auto !important;
    }
    /* Disable scrolling transform */
    .fp-auto-height-responsive > .fp-scrollable > .fp-scroller {
        transform: none !important;
    }
    /* Hide scrollbars */
    .fp-auto-height-responsive > .fp-scrollable > .iScrollVerticalScrollbar{
        display: none !important;
    }
}

It works on my trials but I would like to get opinions if this would be a better solution to this problem.

[rostik]

@media only screen and (max-width:1023px) {
    .fp-scrollable {
        height: auto !important;
    }
}

this fixed it for me

[alvarotrigo]

Feature added on dev. To be merged in 2.9.5.
scrollOverflow won't be applied on responsive to sections containing the class fp-auto-height-responsive.

Example:

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

[yann2-0]

Hello, this is my first time posting mostly in English and I am a beginner. I therefore use fullpage and scrolloverflow: true, however in responsive mode my slides must be able to be scrolled I also seem to have a good result with .fp-scrollable {height: auto! important; }.
However when I scroll down everything is fine but when I scroll up my sections are shifted up at least 30px in portrait mode Any idea what the problem is? when i scroll down everything is fine and in landscape mode too.
Anyway thank you for this library.

[alvarotrigo]

.fp-scrollable {height: auto! important; }.

I would recommend not to modify css styles.

Just use scrollOverflow:true. Or the class fp-auto-height-responsive together with responsiveWidth.

See this example:
https://alvarotrigo.com/fullPage/examples/autoHeightResponsive.html

And this one using scrollOverflow:true:
https://alvarotrigo.com/fullPage/examples/scrolling.html

[yann2-0]

Thank you for your reply. I succeeded in the meantime by adding bigSectionsDestination: top,
Great your job, I dream of being able to do this one day