Scroll Snap Points are a native CSS-only technique that you can use to create layouts where your content is easily scrolled or panned. With this new feature you can easily control how your content will scroll and how it will ‘snap’ to the correct locations (letting you create features such as pagination with ease).

Historically developers have used JavaScript (often jQuery) to create perfect smooth-scrolling, snapping interfaces. While these work just fine, having a native CSS approach that does essentially the same thing is always better.

The specification for Snap Points is still relatively new (and under development); however it’s supported by a few browsers and is stable enough for us to start playing around with.

[author_more]

An Overview of Snap Points

Snap point scrolling works by defining a Scroll Container element and then setting each of its inner elements to be Snap Points. Once these elements have been set, normal scrolling will be modified so that as users scroll/pan they will be snapped from one snap point to the next.

The main element that holds all of your other elements you wish to scroll between is called the Scroll Container. This is our main element and the majority of the snap-related properties will be set here. We can define:

• How tall/wide the container will be
• On which axis/axes the container will scroll (i.e. X, Y, or both)
• The strength of the snap elements and how they will react to scrolling
• The positions/offsets from the container to the snap elements as you scroll

The elements inside the scroll container will become our “Snap Points”. It’s this content that will be scrolled/panned to when we interact with the container. For an individual snap point you will define:

• The offset of the current snap element against the scroll container.

The Scroll Snap Points Properties

Getting Snap Points to work in your projects involves only a few CSS properties. Let’s outline these below and then later when can look at a few examples that showcase how they work.

scroll-snap-destination

This property is set on the scroll container and it defines the X position and Y position values (relative to itself) that the elements inside will snap to. You use this property to tell the container exactly where its elements will be snapped to.

Here are the possible values:

• unset – Used to declare that this container is not a scroll container (by default no containers are unless you set it)
• position – You must set both the X and Y position or the browser will ignore your property
  • Value can be in pixels such as scroll-snap-destination: 50px 100px; which tells the browser that it will snap elements from 50px to the left and 100px from the top.
  • Value can be a set of percentages such as scroll-snap-destination: 0% 100%; which tells the browser that it will snap elements from 0% to the left and 100% from the top.
  • Value can also be other allowed units such as scroll-snap-destination: 0vw 50vw which tells the browser that it will snap elements from 0% of the current viewport height to the left and 50% of the current viewport height to the top.

Let’s look at a few visual aids so you can see how this property works (as it’s one of those properties you will need to adjust until you get the correct effect).

Continue reading %Intuitive Scrolling Interfaces with CSS Scroll Snap Points%

Source: SitePoint