Vertical Scroll Snapping In Elementor with CSS

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.

child

Give 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-wrap

And 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. 😀