- This topic has 18 replies, 3 voices, and was last updated 2 years, 3 months ago by Elvin.
-
AuthorPosts
-
December 30, 2021 at 1:38 am #2063594Dorin
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.
December 30, 2021 at 7:03 am #2063822DavidStaffCustomer SupportHi 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.
December 31, 2021 at 2:23 am #2064609DorinHi David,
Unfortunately it doesn’t work. The containers inside dissapear completely, except for the first one.
December 31, 2021 at 9:36 am #2065030DavidStaffCustomer SupportI made an edit to the CSS above:
https://generatepress.com/forums/topic/scroll-snap-on-mobile/#post-2063822
January 1, 2022 at 7:00 am #2065553DorinHappy new year, David.
I’m afraid the edit doesn’t work.January 1, 2022 at 10:00 am #2065817DavidStaffCustomer SupportHappy 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 withchapter
class
— Container Block – Child for Section 2 withchapter
class
— Container Block – Child for Section 3 withchapter
classetc……
January 2, 2022 at 4:16 am #2066226DorinDavid, 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.
January 2, 2022 at 7:34 am #2066360DavidStaffCustomer SupportIt 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 :
January 2, 2022 at 2:27 pm #2066792DorinJust 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>
January 2, 2022 at 4:00 pm #2066854DorinManaged 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.
January 3, 2022 at 4:44 am #2067265DavidStaffCustomer SupportLooking 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 thefullpage
variable i would try this selector:.scroll-container .gb-inside-container
January 3, 2022 at 6:05 am #2067366DorinHi 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.January 3, 2022 at 4:25 pm #2068181ElvinStaffCustomer SupportHi 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?
January 4, 2022 at 1:19 pm #2069267DorinHi 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.
January 4, 2022 at 5:31 pm #2069400ElvinStaffCustomer SupportThat’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. 😀
-
AuthorPosts
- You must be logged in to reply to this topic.