Original address: blog.usejournal.com/css-scroll-… Translation address: github.com/xiao-T/note…

The copyright of this article belongs to the original author. Translation is for study only.

Remember the days when you needed JS for elegant scrolling on a page (gallery, Slide, etc.)? Send JS away and embrace CSS Scroll Snap.

A long time ago, when CSS was in its first phase, we introduced CSS Scroll Snap, which allows scrolling elements to stick close to the boundaries of the container. However, only Firefox supports it. By now, all browsers ** are supported. Let’s embrace it, abandon JS, and implement pure CSS scrolling.

What’s it good for?

Suppose we need to compare something on a page. We need to compare one item to all the items in a list. We don’t know the length of the list, but we want to put the items in the list side by side with the items we need to compare. The list is too long to scroll (let’s say on the X-axis), and every time the page scrolls, we want to see the full size of each item, not just a part of it.

Without this CSS property, if we need to scroll through a list, we must be careful to keep an element as close to the boundary of the container as possible. However, by taking advantage of this CSS property, we only need to scroll 50 percent of the elements and leave the rest to the browser.

If you’re on a mobile device, scroll a little left, right, up or down. The entire screen will scroll to the next page (if, in some cases), you don’t need to scroll the entire page. This would be the best demonstration of this property.

Scroll snap type

We defined that the container has a set of scrolling items. We set the CSS Scroll Type property to Scroll close to the container’s boundaries. We have several values to choose from: None, x, y, block, inline, or both

codepen.io

The differences between these options are:

  • None – You don’t need to cling to boundaries

  • X — close to the x boundary

  • Y — close to the y boundary

  • Block — close to the Block axis (logical attribute) — Vertical axis (equivalent to Y axis)

  • Inline – Close to the inline axis (logical attribute) – Horizontal axis (equivalent to the X axis)

  • Both — close to the X and y axes

There is another property in the scrollsnap-type that needs to be set. Its values include:

  • mandatory
  • proximity

A mandatory value indicates that the element automatically scrolls when it reaches 51% of its width (x/inline axis) or height (Y /block axis). A mandatory value indicates that the element automatically scrolls when it reaches 51% of its width (x/inline axis) or height (Y /block axis).

(Translator’s note: The two effects were compared and there was no difference. The translation on MDN is also difficult to understand 😂)

The syntax and selection values of scroll snap-type are as follows:

scroll-snap-type: none | [ x | y | inline | block ] [ mandatory | proximity ];
Copy the code

Now that we know where the scroll element ** sticks to the edge, we can set the scroll-snap-align property on the scroll element to determine how the scroll element sticks to the edge.

Fix iOS issues

Thanks to Denys Mishunov for providing this fix for iOS users

To support iOS users, simply add the following line of code

-webkit-overflow-scrolling: touch;
Copy the code

Therefore, our code should look like this:

.foo {
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
}
Copy the code

Scroll snap align

We can define how the scroll element fits within the boundary. There are several options: Start, Center, or end

To achieve this effect, we need to define “scroll-snap-align” for each scroll element.

If we define the scroll element as “scroll-snap-align: start”, it will be close to the beginning of the boundary of the container (defined according to the axis we choose).

If, we declare “scroll-snap-align: center; , the scroll element will be displayed in the middle of the container, with boundaries around the element-as you can see in the image above.

The next three examples correspond to three different options for this scroll-snap-type: X, Y, and Both — all of which have the scroll-snap-align value of “start” and “center”.

The X axis

Y

both

Scroll margin / Scroll padding

Scroll-padding and scroll-margin are the same thing as padding/margin. You can control the white space between scrolling elements and boundaries.

For example, set “scroll-padding: 10px;”. There will be a 10px space between the scroll element and the container boundary.

Currently, these attributes are not fully supported

Browser support

As you can see from the “Caniuse” record, all browsers now support this property

  • IE/Edge requires the prefix -ms-

  • Old syntax can be used in Firefox

As a final example, you will see a slide effect that scrolls vertically/horizontally.

slides demo

conclusion

  • CSS properties are easier to use

  • We can quickly and easily create scrolling galleries, slideshows, full screen scrolling and other effects

  • From our point of view, there is still a small problem. If one of the elements is larger than the container, we can’t see all of it – scrolling will jump to the next element.