Adding scroll snap

[logoglo]

Howdy, I came across this post:

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’ 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: …

I tried doing the same, however, in my css, it is greyed out:

Any reason why this is happening? obviously it means the code isn’t working, yet the person in the mentioned post, says it worked for him.

Please advise.

Thanks.

[ruenel]

Hello @logoglo,

Thanks for writing in!

Please double check your custom CSS code. In your screenshot above, I am seeing an orphaned } closing curly brace.

You can use CSS Lint or this tool, CSS Formatter (cleancss.com).

Kindly let us know how it goes.

[logoglo]

I have modified the code, to work on all screens, and have added an id to each section, yet it doesnt seam to work:

.cs-content {
scroll-snap-type: y mandatory;
  overflow-y: scroll;
   overflow: hidden;

}
#step-1, #step-2, #step-3 {
    scroll-snap-align: start;
  background-color: #ec008c!important;
}

If I try different css things like background-color, it applies it, but the scrolling no…so it does seam to have an effect, the fact the scroll-snap is greyed out…

[ruenel]

Hello @logoglo,

Be advised that custom coding is beyond the scope of our support under our Support Policy. You will have to check for validity and maintain any of the custom codes to make sure that it will still work after any updates or does not create any issues or incompatibility in the future. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

As for our support, we can only check for any CSS errors like broken CSS code or incorrect CSS selectors used in your code. We may also give pointers what could be done to make it right. Since your CSS code above does not apply to you page, can you please provide us the URL of the page instead?

Best Regards.

[logoglo]

Understood, and thanks…the page is: https://ese-mas.com/inicio-new/

[ruenel]

Hello @logoglo,

You are using this code which is different from the code in the old thread:

html{
    scroll-snap-type:y mandatory;
    overflow-y:scroll;
}
#step-1,#step-2,#step-3{
    scroll-snap-align:start;
    background-color:#ec008c!important;
}

It is best that you check out this documentation first:

• https://css-tricks.com/practical-css-scroll-snapping/
• https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

Thanks.

[logoglo]

OMG! you helped me see the light, I think I got myself into a tunnel, and after you said this, I went back to the original code, and took out the @media parts…and I have it working! its so cool too, this site was made for this type of scrolling.

Thanks again for all your help.

[prakash_s]

Hello @logoglo,

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns.

Thanks

[prakash_s]

Hello @logoglo,

By withdrawing the post, I believe you already have resolved the issue. If the issue still existed, you can let us know.

Thanks.

[logoglo]

OK, so the only issue im having now, is the menu is no longer sticky, is there a way I could still have it showing on screen as you scroll down?

If I take out " height: 100vh;" from the blow code, the menu works as it should:

scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}

Also, I have contacto in the menu that should scroll to id, but that is now not working either

[ruenel]

Hello @logoglo,

Your scroll-snap code is being applied to the HTML element on the page. Keep in mind that there are also elements on the page like the sticky property relies on the property of the HTML element.

html{
  /* your scroll snap code here */
}

It is best that you use other element container to have the scroll snap property instead.

Kindly let us know how it goes.

[logoglo]

Ok, I have fixed that issue, but the scroll to section isnt working (contacto) should scroll down to the last section, but its not, would love your help on that please. Thanks.

[ruenel]

Hello @logoglo,

This is what I am seeing with your site on my browser:

Scroll Snap

Upon inspection, I noticed that you have a duplicate element ID which is incorrect.

Be advise that element IDs should be unique and no duplicates.

• HTML - The id attribute (w3schools.com)

If you are hiding an area for specific screen size, you can use 1 section where you can insert the element ID, e.g. #step1 and then inside the section, you can have two Row elements in which each of the row will be intended to different screens size.

Hope this makes sense.

[tristup]

Hi @logoglo,

By withdrawing the post, I believe you already have resolved the issue. If the issue still existed, you can let us know.

Thanks.

[logoglo]

The issue from the withdrawn post still remains. Please help

[logoglo]

Hi, thanks, yeha, I setup the 2 rows in one section, like you suggested, but the issue remains…

I noticed, if I take out " height: 100vh;" from the code:

.cs-content {
scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
    }
#step-1, #step-2, #step-3, #step-4, #step-5, #step-6, #step-7 {
    scroll-snap-align: start;
}

The scroll to section works, but then the scroll-snap, stops working.

Also, there is an added scroll bar on the desktop, how do I get rid of that?

I also added a footer, and assigned it to this page, but its not showing.

Please help.

[ruenel]

Hello @logoglo,

Instead of using height: 100vh, use min-height: 60vh instead.

Again, please be advised that our supported is limited only to getting your X/Pro theme (or Cornerstone plugin) getting set up, bug fixes and minor cosmetic changes. Custom coding is beyond the scope of our support.

Hope this helps and thank you for your understanding.

[logoglo]

Thanks, that kinda did the trick, its now scrolling to ID from the menu, but the extra scroll bar is still there, and the scroll-snap has stopped working, and the scrolling overall is acting weird, you have to use the far right scroll bar to reach the footer.

1: scroll-snap, works with my above code. But doesnt scroll to ID. And the footer is hidden.
2: above code shows 2 scrolls bars, so if I add “body {
overflow: hidden !important;
}” It hides the scroll bar, but then the blog page, and posts dont work, obviously as they are setup differently.
3: If I use “min-height: 60vh” the scroll to id works, but scroll-snap doesnt, and shows the extra scroll bar. And the footer is there, but you need to get there using the outer extra scroll bar.

I hope there is a work around…

Thanks.

[christian]

Hey @logoglo,

If you need us to develop a workaround or solution, please consider having our Elite team custom code for you. You can check the service here https://theme.co/elite

Thank you for understanding.

[logoglo]

This is a real shame, if it’s a case of a couple of lines of css being corrected, I think it would benefit the community of themeco users greatly, its a very cool feature, any further help would be greatly appreciated, but I do understand if you can’t.

Maybe if you could explain why things are not working, and what part of the code I need to change, and I can experiment myself.

Thanks.