Elementor CSS Scroll Snap: How To Optimize For UX (See Demo)

Elementor's recent addition of CSS Scroll Snap is quite interesting.

However, the limited availability of options and fine tuning, plus some pitfalls inherent to CSS Scroll Snap, means you have to plan your design well to make it all work.

You might also need some custom CSS to disable it on certain viewport only.

Often it will work and look well on desktop, but be more of a hindrance on mobile, particularly if the content doesn't all fit within 100vh.

Here is an example of a CSS Scroll Snap page I made with Elementor, and fine tuned with the optimizations below.

That demo was also created for my tutorial that shows you how to have the Elementor entrance animations replaying each scroll down.

The animations in that demo also uses my Elementor entrance animations improved stylesheet.

If you are interested in the template for that demo, you can get it by purchasing this tutorial.

The General Idea

To get a good result with CSS Scroll Snap, you will essentially want to plan your design so that the page becomes a kind of vertical slider.

I find that's when CSS Scroll Snap gives optimal results.

Otherwise, it becomes a kind of scroll jacking, and can be very annoying to users.

To make it a "vertical slider" kind of design, you will want to have each section / container be set to min-height:100vh. And you will want all the content to fit within this 100vh.

You will also want to be careful of smaller viewports, and verify that your content fits within, let's say, a 1100px * 570px viewport too. Otherwise, these users won't have a nice vertical slider kind of experience, but more of a scroll jacked experience.

You can also use CSS to disable the CSS Scroll Snap below a certain viewport height, or on tablet and mobile, where the content might not fit within 100vh. More on this later.

Setting Up Elementor CSS Scroll Snap

To turn on Scroll Snap, on any page you might be working on

1. Click the keg icon in the lower left corner.
2. Click to go to the Advanced Tab
3. Turn on the toggle

4. The Snap Position

For most designs, you will want this to be "top". Really though, if all your content fits within 100vh, any position will give the same result.

The different is that by choosing "top", if a viewer has a narrow viewport, in terms of height, it will snap to the top of the section / container, and not skip any content. If you choose "center", it might pass over content that was above, in that section / container.

5. Scroll Padding

Useful if you have a sticky header. Enter the approximate PX height of your header here, and the snapping position will consider it.

6. Scroll Snap Stop

To have it be a vertical slider kind of design, you will want this set to "Always".

Disabling Elementor CSS Scroll Snap On Mobile

The CSS scroll snap option in Elementor isn't responsive. You either turn it on or off. Often though you might want scroll snapping on desktop, normal behaviour on mobile...

Custom CSS to the rescue. You can add this CSS to your page to disable the CSS scroll snap on mobile.

If you want it disabled on tablet too, change the "767px" value to "1024px", and that will disable it for mobile and tablet.

@media (max-width:767px){
html body {
scroll-snap-type: none;
}
}

To disable it for narrow viewports, in terms of height, use the following CSS. It will disable it for viewports that are 600px or less in height. Adjust this value to whatever you need!

@media (max-height:600px){
html body {
scroll-snap-type: none;
}
}

Disabling scroll snap for the header and footer

By default, Elementor CSS scroll snap will be enabled for all first level sections in the page content, as well as the header and footer.

To have the scroll snapping happen only on the first level page sections, and ignore the header and footer, add the CSS below:

body:not(.elementor-editor-active) .elementor-location-header,body:not(.elementor-editor-active) .elementor-location-footer, body:not(.elementor-editor-active) .page-header, body:not(.elementor-editor-active) .site-header {
scroll-snap-align: none;
scroll-snap-stop: unset;
}

This will improve the UI UX and prevent from stopping after the header, and prevent snapping in the footer.

Making Elementor CSS Scroll Snapping work with Containers

For now, Elementor's CSS isn't proper for this to work well with containers. It applies the scroll snap CSS to every single containers, including inner containers. That makes the scroll snapping stops at them all, degrading the UI UX significantly.

This is likely to be fixed by Elementor directly at some point.  Meanwhile, if you are using containers and CSS scroll snap, you will want to add the following CSS snippet.

With this snippet, it will only consider the first level containers, IE those that aren't inside any other "container" element.

body:not(.elementor-editor-active) .e-con {
scroll-snap-align: none;
scroll-snap-stop: unset;
}
.elementor > .e-con.e-con.e-con {
scroll-snap-align: start;
scroll-snap-stop: always;
}

Elementor CSS Scroll Snapping & Menu Anchors Support

By default, Elementor Scroll Snapping doesn't work very well at all with menu anchors. Interestingly enough, the problem comes from the Elementor native smooth scrolling to anchors feature.

Yet, Elementor doesn't disable that feature automatically when Scroll Snapping is enabled. They really should, it would fix these issues.

In any case, here is how you can disable it: add this code in an HTML element, on the same page(s) where you have CSS scroll snapping enabled.

<script>
window.addEventListener( 'elementor/frontend/init', function() {
if ( typeof elementorFrontend === 'undefined' ) {
return;
}

elementorFrontend.on( 'components:init', function() {
elementorFrontend.utils.anchors.setSettings('selectors',{});

} );
} );
</script>

You will also want to add this CSS, so that your anchor still scroll smoothly to their destination. You could add it under the page custom CSS field.

body {
scroll-behavior:smooth;
}

Finally, enjoy your  UI UX optimized Elementor CSS Scroll Snap!

I really hope you found this tutorial useful.

Cheers!