Divi Css - How to use Divi Blurb for navigating your page and the new Css Scroll Snap property

;

Hi everyone, today here at Howidivit.com we want to show you how you can create a one page website with no scrolling but just scrolling buttons between one section and another.

Give it a quick sneakpeek and let’s get started!

A SNEAKPEEK

You can simply go through the post in order to see the effect. Just try to scroll clicking on the blurb icon below!

;

1 – CREATE YOUR SECTIONS

Just few steps, first of all we have to create our page. Just add section, rows and modules you want inside of it.

Remember to add at end of every section a blurb module getting rid of all text and giving the icon a link url to the css id of the following section!

;

2 – FIX THE SECTION HEIGHT

Next we are going to fix the height of our section to fit exactly the entire visible screen. We just have to open the section settings, go to the Advanced tab -> Custom Css and add the following simple line of code:

// Css for fixing the height

height: 100vh;

;

3 – HIDE THE SCROLLING BAR

Finally we have to hide our scrolling bar in order to be sure the user have to click on the button to switch among the sections. Just add the following css in the Page Settings -> Advanced -> Custom Css:

// Hide the scrolling bar

html, body {
overflow: hidden;

Remember that the user should always be able to go up on your page, so you have more than one option: you can just make available a bottom to top anchor (as like we have in this post), turn on the Divi Dot Navigation or also add specular buttons for navigating up in the page.

;

NEW CSS FEATURE: SCROLL SNAP POINTS

However if you want to leave the user the ability to scroll but you won’t let him to leave the scrolling point in between of two sections you can take advantage of a very new Css feature: Scroll Snap Point.

Thanks to the Scroll Snap Point property we can choose the point of the section in which the scroll has to be fixed to. Let’s say we want to get the same effect we have seen above; we will write a css code like this (always in our Page Settings Custom Css):

// Scroll Snap Point

html, body {
 -webkit-scroll-snap-points-y: repeat(100%);
 scroll-snap-points-y: repeat(100%);
 -webkit-scroll-snap-type: mandatory;
 scroll-snap-type: mandatory;
 -webkit-scroll-snap-destination: 100% 100%;
 scroll-snap-destination: 100% 0%;
}

NOTE that actually there is a considerable downside: the Scroll Snap Point property from our tests seems to work just in the latest version of Firefox (maybe also in IE and Edge but not in Chrome, Opera and partially in Safari). You can give a look here at the compatibility and test it by yourself.

;

FINAL THOUGHTS

It would be really useful work steadily with the Scroll Snap property giving us a great tool to choose where the user scrolling have to stop and what to show or not. However, as we have seen, the compatibility is still poor and we have probably to wait before going in production with it.

In the next friday post we will see another new Css feature that can often comes useful to us: the @supports property.

See you next post!