Is there a way for us to utilize a scroll snap for each section on a page?
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:
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:
scroll-snap-type: y mandatory;
That's it! Let me know if that worked for you.
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:
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!
When you say Scroll Snap I assume you are referring to anchor links? And Scroll to the anchors??? Perhaps an example??
Something like this
That is awesome! Thank you!
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! 😄