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’ 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!