[Support request] Scroll snap on mobile

[Dorin]

Elvin, thanks so much for the help. I feel like I’m in over my head with this one. fullpage.js seems a big pain to adapt to what I currently have. The header and footer sections are just two issues, but there are more, like trying to place and align blocks inside each section. fullpage has taken control over the entire page and nothing works as it’s supposed to. It defeats the whole purpose. I’ll go back to CSS scroll-snap and try to adapt it the best I can. Though I must admit fullpage.js provides a better viewing experience across all browsers and devices.

[Elvin]

What you’re doing is actually an interesting thought experiment as I personally find it fun to push the limits of GP and GB w/ customizations. But yes, I get what you mean. 😀

I think what you were trying to do required the page to have completely disabled Site Header and Footer meaning the only things appearing should be the contents made within the page’s content area.(the blocks)

The simplified structure in text form would be:

[ Site Header Removed ]
— content area —
[First section with the custom site Header]
[another section]
[another section]
[another section]
[another section]
[Last section with the custom site Footer ]
— end of content area —
[ Site Footer Removed ]

As the fullpage.js’ script forces the content area to be 100vh so it makes the illusion of fullpage scrolling.

But then again, I’m not exactly sure about the context of the specifics of how it’s supposed to work. If you can show us an Adobe XD prototype or a Figma site demo, we can check it out and know if maybe fullpage.js isn’t what you need and advise on what can be done. 🙂

[Dorin]

Elvin, thanks so much for not quitting on this. I’ve already set up the test page as you suggested above. You can take a look yourself if you have the time and nerves. 🙂 I’m really curious if there’s a simpler way to adapt fullpage.js to GP and GB. I looked online a bit and someone suggested altering fullpage’s libraries to suit your specific needs. At this point, I’m happy I got this far, but I feel it could take a lot more custom work to make this truly compatible.
A side note, fullpage has a specific wordpress plugin too, but I wanted to avoid that and instead try to make it work for the pages I already have. At the end of the day, I just wanted a simple thing: an effective scroll snap that works great across browsers and devices. CSS scroll-snap option gave me quite the headaches, but I think it can adapted with a bit of custom work. Since I’m not a programmer, I honestly don’t know at this point which method is worth the time and effort.

[Elvin]

The /scroll-snap-test page you’ve done is actually quite close. You just need to add the header and footer.

To clarify:

Were you trying to make the Header and Footer stick only to the first and last sections?

If that’s the case then you really must disable the Site header and footer like I mentioned.

Then create some sort of the custom header that is position: fixed; or position: absolute; within the first section (w/ the first section wrapper having position: relative to contain it) and do the same thing w/ the site footer as well.

The first section would be structured like this

[ First section main container ] <- set this to position: relative; so the custom header is binded to it.
>> [ Custom site header ] <- set this to position: fixed; or position: absolute; w/ width: 100%; top:0; left:0;.
>> [ First section content ] <- this is the content

For the last section with the footer, the idea is basically the same but the arrangement is:

[ Last section main container ] <- set this to position: relative; so the custom footer is binded to it.
>> [ Custom site footer ] <- set this to position: fixed; or position: absolute; w/ width: 100%; top:0; left:0;.
>> [ last section content ] <- this is the content

Note: You may have to play around with the z-index value as well that this is the gist of the idea.

Now the specifics on html structure hierarchy would be:

Parent container block would stay as is which would be the one with the fp-section class.

You basically just add another Container block inside this parent container block and have it use the class custom-header so you can style it into something like:

.fp-section:first-child { position: relative; }
.fp-section:first-child .custom-header { position: absolute; width: 100%; top:0; left:0; z-index: 10;}

Same idea w/ the footer.

example:

.fp-section:first-child { position: relative; }
.fp-section:first-child .custom-footer { position: absolute; width: 100%; bottom:0; left:0; z-index: 10;}

[Author]

Posts