In todays tutorial we are going to through how you can add vertical scroll snapping to your Elementor site with just CSS. Here is a preview how it should function.
For this to work you don’t need any kind of special tools or plugins. As a reference for those who would like to get familiar with scroll-snap css you can check out this page Scroll-snap.
Let’s Begin
To start we will need to have a one column section with the minimum height set to 100 like the picture below.
Next we need to give this section a special class. This can be added in the advanced tab.
childGive this section a color and duplicate it 3- 4 times changing the color for each section.
The CSS
Because the CSS we will be adding has the potential of affecting the entire site we are going to make sure it only effects your current page.
Scroll snapping works by affecting the child elements within the wrapper container.
The wrapper class is called..
.elementor-section-wrapAnd it is on every page build with Elementor so that is why we can’t add this CSS to your customizer or stylesheet.
Now open your editor and drag a html widget to the top of the page in its own section.
Remove the padding from the column.
If you don’t remove the padding from the column you will see a blank white space at the top.
Copy and paste the html below.
<style type="text/css">
.elementor-section-wrap {
overflow: scroll;
height: 100vh;
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start!important;
}
</style>And there you have an easy way to add scroll snapping to your site.
Hope you found this useful. 😀
10 Responses
Great tutorial, thanks. I linked a button in my first section to a form all the way down to the page. Now it doesn’t work anymore (no scrolling at all), any idea how to override this?
Hi Martin,
Let me try and recreate what you are attempting and post back.
Same problem? Any solution?
Same issue here! It’s because of the overflow scroll. You scroll in a div and not on your website. So when you want to go to a section he will say that you already there.
I hope someone has a creative solution for this!
Hi Aires, Great Tutorial,
You said “….Give this section a color and duplicate it 3- 4 times changing the color for each section….”
How about if I want to add, all my posts in frontpage the scroll snapping? How can I achieve that?.
Warm regards.
Sean.
Snap worked great but broke the nav menu. Ended up choosing to keep the menu and forgo the snap scroll. Any idea why?
I can’t seem to stop the large whitespace at the top of the page using this tutorial, tried removing the padding from the column of the html element but doesn’t make a difference, any ideaS?
Can you provide a link to your site?
Hi, thank you so much for the tip! Do you know if it is possible to stop the code in one of the sections of the page? Because in on my pages my idea is to have two sections with VH 100% that you can snap vertically and then one section with an extended height that you can scroll normally. This section on Chrome looks good, but on Safari is not, it scrolls directly to the next one, in a crazy way. Link: https://www.yaninaisla.com/bergman-week/
Thank you so much for the help!
Hi! This is awesome thank you! However seems to effect quite a bit of motion effects (which don’t work after implementation of HTML) – and seems other elements which need to understand page position, which stop working as well after adding HTML. Any clue how to fix this? Thanks again for the tutorial.