The CSS Scroll Snap standard is fully supported in Chrome 69, the latest stable release. This standard is used to set up a scroll capture point so that the final scroll position is attached to a nearby or specific type of capture point for a better scrolling experience. Today we’re going to look at it.

Browser Support

What is capture

Those of you who have learned CAD software may well know that when we move an object, the object can always be automatically attached to the grid line, so that the object can only fall on a certain position on the grid. This is grid capture. Or to put it another way, on a normal measuring stick, you can only land your brush on a scale of 1mm and 2mm, not between them.

What is scroll capture

Scroll capture, that is, the scroll position is captured while scrolling. Let’s start with two examples provided by the W3C:

Example 1: Use a series of images stacked in a horizontal scrollable container to form an album like container, using element-based position capture so that the position of an image at the end of the scroll will always be in the center of the scrolling viewport.

img {
    /* Specifies that the capture position of each image is aligned with the X-axis center of the scroll container's visual area */
    scroll-snap-align: none center;
}
.photoGallery {
    width: 500px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    /* Requires that the end of each scroll be exactly at the capture point */
    scroll-snap-type: x mandatory;
}
Copy the code
<div class="photoGallery">
    <img src="img1.jpg">
    <img src="img2.jpg">
    <img src="img3.jpg">
    <img src="img4.jpg">
    <img src="img5.jpg">
</div>
Copy the code

The red area in the image is the visible area of the scrollable container or capture viewport. The area in the yellow box of the image is called the capture area. The scroll-snap-align we set above specifies the horizontal capture point as the center position. Capture points will be formed in the center of the capture viewport area (red dotted line) and in the center of the capture area (yellow dotted line).

Example 2: In this example, the scroll position of a paged document is captured near the scroll container for each page of the document. This inexact capture allows the end of the previous document to appear near the capture point (the edge of the container), allowing the user to perceive the effect of not reaching the top of all documents. Using imprecise capture allows the user to stop in the middle of a scroll without forcing the scroll position to be “corrected” to the capture point, as accurate capture does. However, with imprecise capture, if the end scroll point is already near the capture point, the browser will change the final scroll point to the specified capture point.

.page {
    /* Specifies the top of each page of the document as the capture location */
    scroll-snap-align: start none;
}
.docScroller {
    width: 500px;
    overflow-x: hidden;
    overflow-y: auto;
    /* Specifies that the capture viewport should have a 100px upper inner margin */
    scroll-padding: 100px 0 0;
    /* Using imprecise capture allows scrolling to end near the capture point without further adjustment */
    scroll-snap-type: y proximity;
}
Copy the code
<div class="docScroller">
    <div class="page">Page 1</div>
    <div class="page">Page 2</div>
    <div class="page">Page 3</div>
    <div class="page">Page 4</div>
</div>
Copy the code

As shown in the figure above, the first step is to determine the capture viewport. Due to the use of scroll-padding, the capture viewport has an upper distance of 100px from the scrolling viewport. By using scroll-snap-align, the capture point of the capture area is determined to be located at the beginning of the vertical axis of the area

Ok, to summarize, we already know that the following conditions are required to form a capture:

  1. It’s a scrollable region
  2. Determine the capture point for the capture viewport and capture region

So let’s take a look at some of the properties that control these parameters with the example above

Capture viewport related controls

scroll-snap-type

By setting scrollsnap-type, a rolling container can be converted into a rolling capture container. In addition, the scrollcapture rigor is controlled. If the rigor is not specified, it is a proximity that is inprecise by default.

Scrollsnap-type supports two parameters. The first parameter is the capture axis and the second parameter is the capture severity, which can be omitted.

Capture the axial

Capture axes have x, Y, block, inline, and both values.

X: capture affects the X-axis direction of the capture viewport

Y: capture affects the Y-axis direction of the capture viewport

Block: captures the axis direction of the influence block

Inline: Capture affects the direction of the row axis

Both: capture affects all directions

Capture rigor

None: no catch

Mandatory: Accurate capture

Proximity: Inexact capture

Such as:

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

In document scrolling capture, the capture viewport accurately captures the Y-axis direction.

scroll-padding

The scroll-padding specifies the inner margin between the capture port and the scroll container, giving developers more control over the capture area. The scroll-padding argument has the same form as the common padding argument, but also has the same properties as the PADDing-top property.

Capture area specific controls

scroll-margin

Scroll margin specifies the margin between the capture area and the capture element. For example, set the scroll margin of the capture area to 20px; The generated capture region will actually be larger than the size of the capture element. The scroll-margin parameter is in the same form as the common margin parameter, and has the same properties as margin, such as scroll-margin-top.

scroll-snap-align

The scroll-snap-align property specifies the capture position of the scroll area and capture viewport, and serves as the alignment position of all capture areas relative to the capture viewport. For example, if the scroll-snap-align is set to center, the capture position of the scroll area is in the center position, and the capture position of the viewport is in the center position specified in the scroll-snap-type direction.

Scroll snap-align sets the capture alignment for x, Y, or row, block, respectively. If the second argument is omitted, the x and y values are the values specified by the first argument.

Scroll snap-type can have the following attribute values:

None: no definition

Start: Aligns the start position

“End” : Aligns the end position

Center: Aligns the center position

Such as:

.item {
    scroll-snap-align: none start;
}
Copy the code

summary

From the above example, we can clearly see that the CSS Scroll Snap feature is used to control the position of the end of the Scroll and immediately display the content that the user wants to see. At present, only some browsers fully support the latest CSS Scroll Snap standard, expecting other big manufacturers to join.

Thank you

Thanks to Liu Guanyu for correcting the article and title suggestions, thanks to Huang Xiaolu for correcting the article.

The resources

  1. www.w3.org/TR/css-scro…
  2. Webdesign.tutsplus.com/tutorials/h…