Snap Scroll

Options
karina
karina Member Posts: 1
in Ask a Question

Is there a way to add snapscroll to the site? i tried adding the code below to the home.css in dev mode, but it just snaps to the bottom and doesn't let me scroll up. Any advice?

html {
scroll-snap-type: y mandatory;
}

section {
scroll-snap-align: start;
}

Best Answer

  • Shawn
    Shawn Member Posts: 9 Marketing Team
    Answer ✓
    Options

    Hi Karina!

    I've got a demo of scroll snap built using Flex that might be helpful here: https://scroll-snap-example.multiscreensite.com/

    This site is really simple and uses the same code you included added to the very same home.css file. In the editor, the scroll is snapped to the top of each Flex Section so you want to make sure that your sections are big enough to snap to. I also like to include a "scroll-margin-top" to the section to ensure that there's room for the header.

    Here's a screenshot of the code:

    Screenshot 2024-02-22 at 2.32.59 PM.png

    And an example of a "Flex Section" in the editor:

    Screenshot 2024-02-22 at 2.30.26 PM.png

    If that still doesn't work I might need a little more information about your site. How many sections do you have, and about how tall are they? Are you using Flex? Thanks!

Answers

  • spanky
    spanky Member Posts: 1
    Options

    I also have the same problem. Strangely, within the editor view, scroll-snap will work using the above code inserted into home.css. But on a preview, or published site, there is no scroll-snap and it seems to be ignored. I've gone through the code on a published site i made up just to test this, and your example site too, and it seems the css is there for scroll-snap-align: start for each <section>. Likewise for the scroll-snap-type inside <html>.
    Are you using editor 2.0? your screenshot of a section looks different. (Blue tab inside editor on top of section just says "Section", whereas mine says "Flex Section". Not sure if this affects it or not, but I'm just trying to find differences as to why scroll-snap for your site works, but not for mine.

Categories