Have you ever visited a webpage that has multiple areas where you can scroll, but you have to manually scroll to get to the full picture or element? Using the scroll-snap-type CSS property will help the user get to the picture or element faster and decrease the amount of scrolling.
What is it?
Scroll snapping is when a specific element is locked to the screen as the window scrolls. Think of it like putting a magnet on top of an element that sticks to the top of the screen. The closer it is to the top of the screen, the quicker it gets pulled up.
Why use it?
This is helpful when you want a specific element to stop at a specific point on the page. For example, if you have an image gallery, as the user is going through it, they shouldn’t stop halfway through an image. Instead, they should see the whole image at once – as it is intended and best enjoyed.
How do you implement it?
scroll-snap-type is required for any container you want the snapping to work on. There are 3 questions that you need to answer when using this property:
- Does the container use scroll snapping? If it does, move on to the next step. If it doesn’t you can use the below or don’t write in the code at all:
- none – this disables scroll snapping
- On which axis should scroll snapping apply – x (horizontal), y (vertical), block, or inline?
- x – enables scroll snapping along the x-axis only.
- y – enables scroll snapping along the y-axis only.
- block – enables scroll snapping along the block-axis only.
- inline – enables scroll snapping along the inline-axis only.
- both – enables scroll snapping along both axes (which you can think of as x and y, or inline and block.
- What is the behavior of the snapping? Is it forced all of the time, or only when the user gets “really close” to a snap area?
- mandatory – is a strict value which tells the browser to always go to a snap position when there isn’t scrolling happening.
- proximity – is a strict value which tells the browser to go to a snap position if a scrolling action gets pretty close to a snap position. If it’s not pretty close, then the browser shouldn’t snap and scrolling will behave normally.
Once you have identified your parameters (mentioned above), this is the syntax to follow for your CSS code:
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]
Here are 3 examples of how to use it:
Real-world example:
Take a look at this website for an interesting take: https://cuberto.com or https://webkit.org/demos/scroll-snap/ (pictured below)
User beware!
This is a great concept to help users have a better website experience. However, be cautious about when and how to use this property. Imagine scrolling through a webpage that has the mandatory property set, but your screen size is smaller than the setting for the element with the mandatory property. If you scroll up, it automatically sets itself to the very top, if you scroll down, it automatically sets itself to the very bottom. You can’t get to the middle section of the element because of the CSS coding and there might be vital information for the user there.
In the end
This is a great option to use when you have multiple elements that you want the user to focus on. For example, using it in a gallery would be beneficial to the user. Be sure to test out your code on multiple screen sizes before you publish your code. You definitely don’t want any frustrated users using your site.
Work Cited:
