According to the CSS Scroll Snap Module Level 1 specification, CSS has added a batch of properties that can control scrolling, so that scrolling can get many beautiful interactions that originally need THE intervention of JS scripts under the control of CSS only.

Tips: Some of the giFs captured in this article involve container scrolling. The effect is not very good. Click on the Demo to get a feel for it.

sroll-snap-type

First, sroll-snap-type is probably the most central attribute style in the new scroll specification.

Scroll-snap-type: The property defines how a snap point in the scroll container is strictly enforced.

The definition is a little confusing, but in a nutshell, this property specifies whether a container captures internal scroll actions and how to handle the scroll end state.

grammar

{
    scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]?
}
Copy the code

For example, suppose we want a horizontal scrollable container. After each scroll, the final position of the child element is not awkwardly split, but completely displayed inside the container. We could write it like this:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
Copy the code
ul {
    scroll-snap-type: x mandatory;
}

li {
    scroll-snap-align: center;
}
Copy the code

In the scroll-snap-type: x mandatory command, X captures the scroll in the X-axis direction, and MANDATORY sets the position of the element after the scroll to the specified position.

The left side is normal scroll container writing, the right side is after adding scrollsnap – :

The same is true for Y-axis scrolling, just change the scroll-type:

ul {
    scroll-snap-type: y mandatory;
}
Copy the code

CodePen Demo — CSS Scroll Snap Demo

In the scrollsnap-type command, mandatory and proximity are mandatory

Another important point in the scrollsnap-type command is mandatory and proximity.

  • Mandatory: This is always used in CSS code. Mandatory means that after a scroll has ended, the scroll stop point must be forced to stop at the specified location

  • And when it’s done, it could be that the rolling stop point is actually where the rolling stops, or it could make some additional movement, and it could stand in that location that we’ve told you about

In other words, a rolling container that is configured with scroll-snap-type: y proximity as mentioned above may stand in such an awkward position as the scroll-snapmargin/scroll-padding if it is not additionally set:

scroll-snap-type: both mandatory

The scroll-snap-type command is both mandatory for both horizontal and vertical scrolling.

CodePen Demo — CSS Scroll Snap Both mandatory Demo

scroll-snap-align

Using scroll-snap-align, you can easily control the alignment of the current scroll child to focus in the scroll direction relative to the parent container.

It needs to be applied to the parent element, and there are three possible values:

{
    scroll-snap-align: start | center | end;
}
Copy the code

What does that mean? Look at the diagram:

Can be analogous to a single element in flexbox the justify – content attribute flex – start | flex – end | center, the provisions of the current element on the axis relative to the parent container alignment to understand.

Looking at the actual Demo, add scroll-snap-align to the scroll child:

scroll-snap-align: start

Aligns the currently focused scroll child in the scroll direction relative to the top of the parent container.

scroll-snap-align: center

Aligns the currently focused scroll child to the center of the parent container in the scroll direction.

scroll-snap-align: end

Aligns the currently focused scroll child in the scroll direction with respect to the bottom of the parent container.

CodePen Demo — CSS Scroll Snap Demo

Irregular child element scrolling

If the child element is of different sizes, it can also perform very well, using scroll-snap-align: center so that the irregular child element is in the middle of the container after each scroll:

CodePen Demo — CSS Scroll Snap Irregular child elements Scroll Demo

scroll-margin / scroll-padding

The above scroll-snap-align is useful for controlling the alignment of scroll children with their parents. However, there are only three values to choose from, so when we want to do more detailed control, we can use the scroll-margin or scroll-padding

Among them:

  • The scroll-padding is applied to the scroll parent container, similar to the padding of the box
  • The scroll margin is applied to the scroll child element. The scroll margin of each child element can be set to a different value, similar to the margin of a box

For example, in vertical scrolling, adding a scroll-top: 30px to the parent is the same as adding a scroll-top: 30px to each child:

We want the scroll child to be 30px away from the top of the container based on the scroll-snap-align: start:

<ul class="snap">
  <li>1</li>
  <li>2</li>
  <li>3</li>.</ul>
Copy the code

.snap {
    overflow-x: auto;
    scroll-snap-type: y mandatory;
    scroll-padding-top: 30px;
}

li {
    scroll-snap-align: start;
}
Copy the code

To sum up, scroll-snap-align can be used for simple control of the alignment after scrolling, while scroll-margin/scroll-padding can be used for precise control.

The scroll snap-points-x/scroll snap-points-y is discarded

The development process of the standard, the earlier specification is now abolished, this understanding can be, the new standard is now these several, and most browsers have been compatible:

  • scroll-snap-type
  • scroll-snap-align
  • scroll-margin / scroll-padding
  • scroll-snap-stop

Scroll-snap-stop is a standard still in the laboratory, which has not been introduced much in this paper. I have tried it in several different browsers and have not found that browsers support this attribute for the time being, but there is a clear definition of it in the latest standard.

Practical application, progressive enhancement

In practice, apps have many uses for full-screen scrolling/advertising banners:

CodePen Demo — full screen scroll

Of course, compatibility is still a big issue:

However, in many scenarios, even if the scrollsnap-related attributes are not compatible, they will not affect normal use. Therefore, in many scenarios, these attributes can be directly applied to provide better interaction with supported browsers.

The last

Well, simple popular science, this article is over, I hope to help you 🙂

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.