5/5

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

Related Articles

How To Turn A Section Into A Carousel

Greeting All, In this tutorial I am going to show you how you can turn...

How To Wrap Text In Elementor

Greetings All. This brief tutorial will touch on a subject I was asked about this...

How to Create A CSS Arrow

Greetings All, For this brief tutorial I will show you how to create a css...

How to swap out your logo in your sticky header

This tutorial is going to answer a question that I have seen tons of times...

2 Comments

  • 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?

    Reply
    • Hi Martin,
      Let me try and recreate what you are attempting and post back.

Leave a Reply

Your email address will not be published. Required fields are marked *

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?

newsletter

Subscribe to get notified and receive a special invite.