[Support request] Scroll snap on mobile

Home Forums Support [Support request] Scroll snap on mobile

Home Forums Support Scroll snap on mobile

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #2063594
    Dorin

    I have a page with multiple full height containers and I’m looking to improve the ux especially on mobile by trying to replicate the look and feel of the scroll snap behavior found on Tesla’s website or this one.

    I’ve tried the code below, it only works on desktop (though somewhat different from the ones mentioned above), but doesn’t work properly on mobile (had it tested only in ios’ safari on an iphone).

    html, body {
     scroll-snap-type: y proximity;
    }
    
    .section1 {
     scroll-snap-align: start;
    }

    Thanks for any suggestions.

    #2063822
    David
    Staff
    Customer Support

    Hi there,

    tricky to do well without using Javascript. My approach would be:

    1. Remove the scroll-snap CSS from the Body.
    2. Add a Container Block to your page, and give this an Advanced > Additional CSS Class of: scroll-container
    3. Move all your Section grids inside the scroll container.

    Then we go for the CSS:

    .scroll-container .gb-inside-container {
        height: 100vh;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scroll-snap-type: y mandatory;
    }
    .scroll-container .chapter {
        scroll-snap-align: start;
    }

    Not sure if it will work correctly – let us know.

    #2064609
    Dorin

    Hi David,

    Unfortunately it doesn’t work. The containers inside dissapear completely, except for the first one.

    #2065030
    David
    Staff
    Customer Support
    #2065553
    Dorin

    Happy new year, David.
    I’m afraid the edit doesn’t work.

    #2065817
    David
    Staff
    Customer Support

    Happy New Year.

    Looking closer at your markup, as i didn’t realise there was a LOT of nested columns creating that layout – you would need to change the layout.

    See here for the basic concepts of Scroll Snap:

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts

    For it to work you need a much simpler layout eg.

    Container Block – Parent with class scroll-container class
    — Container Block – Child for Section 1 with chapter class
    — Container Block – Child for Section 2 with chapter class
    — Container Block – Child for Section 3 with chapter class

    etc……

    #2066226
    Dorin

    David, I made a test page that I set up as you explained above. So far it’s not working. When scrolling down, it jumps straight to the last container.

    #2066360
    David
    Staff
    Customer Support

    It kinda works – once you get past the hero section which is outside the scroll container… but its a pain when scrolling back up the list. To be honest i have never had much success using this method for full screen vertical scrolling – its fine for a small element.

    I think you may need to lean on some JS – like fullPage.js :

    https://alvarotrigo.com/fullPage/#page3

    #2066792
    Dorin

    Just installed fullPage.js, but I can’t seem to make it work. I can’t figure if I initialized it or not. I used the code below in a custom html block on the page to initialize the library. I have a license key and all, but don’t want to rely on yet another plugin to do this, so I’m trying the hard way. More so, I need to adapt it to my existing page.

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"> </script>
    <script>
    var myFullpage = new fullpage('.gb-container', {
            licenseKey: 'xxxxxxx',
            //Along with the code for all the options like navigation, scrolling, etc.
            //Custom selectors
            sectionSelector: '.gb-container',
            slideSelector: '.chapter',
    });
    </script>
    #2066854
    Dorin

    Managed to initialize it somehow. Now I can see the first section, but I can’t see the next ones. And the hero header is now fixed.

    #2067265
    David
    Staff
    Customer Support

    Looking at that frameworks Github it states the structure has to be:

    <div id="fullpage">
    	<div class="section">Some section</div>
    	<div class="section">Some section</div>
    	<div class="section">Some section</div>
    	<div class="section">Some section</div>
    </div>

    With GenerateBlocks with have an inner container to deal with. eg.

    <div class="gb-container gb-container-11fd02c1 scroll-container fullpage-wrapper">
        <div class="gb-inside-container">
            <!-- your section containers are here -->
        </div>
    </div>

    i assume the script has to target the gb-inside-container. As this is the direct ancestor of the inner sections.
    So where you specify the fullpage variable i would try this selector:

    .scroll-container .gb-inside-container

    #2067366
    Dorin

    Hi David,

    I set up the target to be .scroll-container. I also tried with .scroll-container .gb-inside-container and the issues remain. Meanwhile, I managed to show the sections, except for the last one. So now I’m dealing with the following challenges:

    1. Can’t display the very last section and the footer. I used the code below to show the other sections and it worked. If I remove .page-hero, the last section is visible, but not the footer.

    .section {
    	display: block !important;
    }

    2. On mobile, the .page-hero is fixed and the content can’t be scrolled.

    #2068181
    Elvin
    Staff
    Customer Support

    Hi there,

    You can try setting the id for the main container and set the selector for the initialization script to something like:

    var myFullpage = new fullpage('#fullpage > .gb-inside-container', {

    1. Can’t display the very last section and the footer. I used the code below to show the other sections and it worked. If I remove .page-hero, the last section is visible, but not the footer.

    It may be best to keep the Header Element empty and have the contents of page hero part of the scrollable content of fullpage.js. (Placed within the #fullpage > .gb-inside-container)

    Can you try it out?

    A wise man once said:
    "Have you cleared your cache?"

    #2069267
    Dorin

    Hi Elvin,

    I changed the selector, but it doesn’t work. I did manage to replicate the page hero as a section of fullpage.js, it’s already looking better. Now I’m stuck with putting the header elements (logo and menu) in there. I created a separate header for this page, it displays correctly and allows scrolling, but it stays above the content as I scroll down. Any chance of showing it only on the first section? Or putting the logo and the menu inside the first section? Would be cool to be able to insert the footer in the last section too.

    #2069400
    Elvin
    Staff
    Customer Support

    That’s quite tricky to do as it’ll mean you’ll have to remove the default site header (you can do it with a Layout element) and create a Block element – Hook w/ a remake of header and is hooked as the first section of the content.

    But I think it is doable, albeit tedious.

    Here’s a procedure to ponder.

    1.) Disable the default site header (use Layout element’s Disable element for this)
    2.) Create a Block Element – Hook.
    3.) In this Block element, make your first section layout w/ a replication layout of the site header in it.
    4.) Set the Block element’s hook to a custom hook w/ a custom hook name. Example (fp_first_section)
    5.) Get a portable hook snippet. (we need this to hook the Block element as the first section. See a snippet I made here – https://generatepress.com/forums/topic/hook-in-hook/#post-1636333 )
    6.) On the fullpage.js page, on the area where you’re supposed to add the section, add a Shortcode block and use the portable hook shortcode provided from the previous step. Example usage: [portable_hook hook_name="fp_first_section"]

    After this, the Block element – Hook you’ve created should appear as the first section of the site.

    You can apply this idea for the Site footer w/ the Last section as well. 😀

    A wise man once said:
    "Have you cleared your cache?"

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.