Scroll Snap in a Page

Options
johnmark21t
johnmark21t Member Posts: 4
in Ask a Question

Is there a way for us to utilize a scroll snap for each section on a page?

Best Answers

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

    Hey johnmark21t! With developer mode, adding Scroll Snap support is pretty easy. I put together a quick example for you, made with Flex, that snaps to every section on a particular page.

    Check it out here: https://scroll-snap-example.multiscreensite.com/

    To do this yourself, go into developer mode and select the CSS for the page you're looking at. This is typically what developer mode opens to by default. Then, copy and paste the following CSS:

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

    section {
    scroll-snap-align: start;
    }

    That's it! Let me know if that worked for you.

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

    Hey @johnmark21t! You're right, it's a little wonky in the editor but it should look just fine on the published site and in a live preview. That same code should work just fine for a website with a sticky header, although I would add a "scroll-margin" to it so that the header doesn't overlay your flex sections. That'd make the new code look like this:

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

    section {
    scroll-snap-align: start; scroll-margin-top: 88px;
    }

    You can replace 88px with whatever size best fits your header. The updated example website is here https://scroll-snap-example.multiscreensite.com/. I also increased the size of each section so that the example is easier to see in action. Let me know if that works for your site in the live preview!

Answers

  • Aj_Cre8
    Aj_Cre8 Member Posts: 672 MVP
    edited December 2023
    Options

    When you say Scroll Snap I assume you are referring to anchor links? And Scroll to the anchors??? Perhaps an example??

  • johnmark21t
    johnmark21t Member Posts: 4
    Options

    Hi,

    Something like this https://css-tricks.com/practical-css-scroll-snapping/

  • johnmark21t
    johnmark21t Member Posts: 4
    Options

    That is awesome! Thank you!

  • johnmark21t
    johnmark21t Member Posts: 4
    Options

    Hi @Shawn it works while I am editing at the Duda editor, however, when I view the page/site using the preview link, it no longer works... Also, is there any way to utilize this solution for a site that has a sticky header? I noticed that when I used a sticky header, the page did not scroll as expected and kind of bugged out...

    Thank you in advanced! 😄

Categories