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:
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):
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.
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!