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

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

Just launched! Checkout the CSS Course for Elementor users.

Table of Contents

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

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

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.

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

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) .elem.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-container {
scroll-snap-align: none;
scroll-snap-stop: unset;
}
.elementor > .e-container.e-container.e-container {
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.

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

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

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

body {
scroll-behavior:smooth;
}

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

I really hope you found this tutorial useful.

Cheers!

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

5 Responses

  1. Can you try this scroll snap feature which uses Nav Menu Anchor links or any other anchor links that scroll you to a specific section of the page? I really had trouble with that when I tried on 2-3 projects. I'm interested to know if you have a good solution for anchor links to work with the snap scrolled page.
    Thanks

  2. Hi !

    I would really like to disable scroll snap for the header. But when I enter the CSS code, Elementor says "unknow property" underlining "scroll-snap-align" or "scroll-snap-stop". However, I have enabled scroll-snapping. Thank you for the article anyway and for your help if you have a solution !

    Emilie

  3. Great tutorial, thank you! Now everything works as it should, well almost everything, because scroll snapping also seems to break other scroll effects. I have a sticky menu and highlighting active menu items when scrolling a single page stops working when the scroll snap is enabled. Menu items are not highlighted at all, or always "active". Do you have any idea how to fix it? I tried using "Page scroll to id" plugin, but it also doesn't work properly with scroll snap enabled. I will be grateful for any help or hint.
    Barbara

Leave a Reply

BRAND NEW

CSS Course For Elementor Users

Become a CSS ninja and design exciting, quality websites that stand out in the crowd.