How to use the scroll-snap technique in WordPress Block Editor

Discover in this tutorial how to use CSS scroll-snap technique in WordPress block editor to customize the scrolling experience.

WordPress block editor is getting more and more powerful and, if you combine it with custom styles, you can get very nice results.

If you know the CSS scroll-snap technique you will know that it allows you to customize the scrolling experience (both vertically and horizontally) so you can get the user to scroll smoothly from one section to another. And since it is supported by all major browsers (94% coverage on caniuse.com) you can use it without any problems.

In this tutorial you will see how to take advantage of this property to create sections that occupy the entire screen so the user can navigate from one to another while the entire content of each section is always displayed.

This is the final result:

I’m sure you’ve seen something similar before, but in most cases with JavaScript scripts. The advantage of the scroll-snap technique with CSS is that it is much lighter.

Interested? Here we go.

Steps to use scroll-snap in the WordPress editor

1. Create the block structure and add the CSS classes

First of all you have to create the block structure. The most important thing in this case are the group and background blocks. The group block encompasses all the background blocks, which contain a header inside.

The structure is as follows:

• 1 group block (CSS class = snap-container)
  • 5 group blocks (CSS class = snap-section)
    • 5 header blocks (H2)

But you are going to see it even clearer with this screenshot:

In the first group block (which is the one that encompasses all the content), go to the “Advanced” section and add snap-container under “Additional CSS class(es)”.

Next, do the same but for the background blocks that contain the content (the header), and in that case use the snap-section class:

Once you have finished it, if you want you can convert it to a pattern directly in the block editor.

In fact, if you want to save time and import the reusable block directly, you can download this JSON file and import it into your WordPress installation.

You can do it from the block editor, in the top 3 points on the top right under Tools > Manage reusable blocks:

2. Customize CSS

Now you just need to use the scroll-snap technique.

To do so, insert this block at the end of style.css:

In these lines you use the properties scroll-snap-type in the container (the group that encompasses everything) and scroll-snap-align in the sections.

You also indicate that the sections should occupy the full height of the screen and hide the scroll bar in the different browsers (so that two of them do not appear at the same time).

Finally, you make sure that the scroll also works on touch screens.

Obviously, you can modify the CSS to suit your needs.

3. Customize colors and images in the block editor

The advantage of using the block editor is that you can modify the background color and the text of the group that encompasses the content of each section (snap-section) directly.

In fact, since you are using background blocks you can choose an image instead of the color and you can add as many blocks as you want inside.

This is just an example for your inspiration, but the idea is that you can adjust it to your taste and needs.

Conclusions

Now you know how to use the snap-scroll technique in the block editor and how to get an eye-catching result with it.

Any questions? I read you in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉