Scroll snap + one-page navigation

Hi there!

I am optimizing the use of a page specifically for use on mobile.

The page has 4 sections, and i use the following CSS to make the navigation on mobile ‘swipe-able’ :slight_smile: in the sense that scrolling always stops at a full section in viewport.

/* SCROLL SNAP on mobile*/

@media only screen and (orientation: portrait) and (max-width: 767px){
.cs-content {
scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
  scroll-padding: 5%;
    }

.x-section {
		height: 90vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    scroll-snap-align: start;
    position: relative;
}
}

That code works fine.

But here is my challenge:

On mobile, I have also implemented a footer (well actually, a bottom header) that contains a button, taking the user to their current section. the button simply refers to the section-id (e.g. #step-1, or #step-2).

If I comment out the scroll snap CSS (from above) that button works fine.

However, with the CSS, it refuses to scroll.

Is there an easy way to solve this?

Thanks!

Oh, i forgot to mention that it DOES work in the Pro builder preview. Just not on the actual page.

Hello Tristan,

Thanks for writing in!

I would recommend that you add a unique my-section ID for your section and then you update your css code into this:

/* SCROLL SNAP on mobile*/

@media only screen and (orientation: portrait) and (max-width: 767px){
	#cs-content {
		scroll-snap-type: y mandatory;
	  	overflow-y: scroll;
	  	height: 100vh;
	  	scroll-padding: 5%;
	}

	#my-section {
		height: 90vh;
	    display: flex;
	    flex-direction: column;
	    flex-wrap: nowrap;
	    justify-content: flex-start;
	    align-items: stretch;
	    align-content: stretch;
	    scroll-snap-align: start;
	    position: relative;
	}
}

Hope this helps. Please let us know how it goes.

I knew you were going to say that :joy:

It needed to apply to all sections on the page, but i updated it now #step-1, #step-2, #step3, as these are the relevant section-ID’s:

/* SCROLL SNAP on mobile*/

@media only screen and (orientation: portrait) and (max-width: 767px){
.cs-content {
scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
  scroll-padding: 5%;
    }

#step-1, #step-2, #step-3 {
		height: 90vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    scroll-snap-align: start;
    position: relative;
}
}

But it still won’t scroll to #step-1 if you press the button on the actual live screen, even though the button has the {URL}#step-1 as URL. The funny thing is that if you type the URL and append #step-1 or #step-2 in the browser, it also scrolls without issues.

Hey Tristan,

The button will scroll to step 1 if you are in a bigger screen. In smaller screen, you cannot click it as if something is blocking the button. Do you have other bar that has a z-index is higher than 9999? Would you mind providing us access to your site so that we can check your settings? Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thanks.

Hey RueNel,

It works on a bigger screen, yes. I think that has to do with the media query, which effectively renders the scroll-snap ineffective.

I don’t have another bar with a higher z-index, that I am aware off…

will attach note with admin access!

Hello Tristan,

Please note that in your custom css you have designated that it will only be applied to the portrait:

@media only screen and (orientation: portrait) and (max-width: 767px){

If you want this for both landscape and portrait, you will have to update that line and use this:

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

Please let us know how it goes.

Hi RueNel,

Yes, that is on purpose. This CSS is specifically for when the page is viewed on a small screen, held in the portrait position. It is switched off in landscape, because of the mandatory heights of 90vh and 100vh, which makes the page look weird on a mobile when turned over on landscape.

My only issue is the scroll not working on mobile.

Hey Tristan,

It’s because your cs-content height is 100vh. Remove it and you’ll see that you’re content will scroll.

Please note that we do not have support for custom CSS. Please forward custom code issues to a third-party developer next time.

Thank you for understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.