discovery

Recently, I played with CSS and found a new property scoll-SANp, which can capture your slide effects and make good page switching effects with CSS.

In the past, that’s all we’ve been able to do with CSS

This experience is often not very friendly, if we want to have a friendly effect like the above automatic across the entire image, we often need to use JS to help achieve this effect, but now it is only a simple two lines of CSS code!!

Next, let’s learn together ~

How scoll-SNAP worksMDN

The scoll-Snap concept is simple. You define a container and capture any gestures you make within the container. The child elements of the container respond to the user’s gestures

Scoll – snap properties

The parent container

1. Scoll-snap-type: val1 val2

  • val1

    • Val1 is used to define the direction of the capture gesture and then move the child elements according to the direction of the capture
    • noneDon’t capture gestures
    • xCapture the X-axis
    • yCapture the Y-axis
    • blockCapture the block direction, that is, the Y-axis direction, when both layout changes, according to the main axis of the layout is captured
    • inlineCapture gestures that are perpendicular to the direction of the block
    • bothCapture all gestures

    Here I recommend using X, Y, both, better experience

  • val2

    • Val2 is basically defined as a sliding representation. It has only two values, but one of them is not stable
    • mandatoryMandatory performance, the form of his performance is that the page must be forced to the specified location, there is no result of half screen card in the adsorption point (example adsorption point is set on the left of the container)

– proximityThe default style, if not set, is this, which will make the element not necessarily adsorbed at the specified location. When the left and right parts of the child element are closer to the adsorption point, it will be adsorbed. When the middle part of the child element is close to the adsorption point, it will not be adsorbed. Sometimes it doesn’t work (because I’ve only tried it at the beginning, it’s too hard to get the material)

Personal mandatory is the most stable effect when the second value is used, and is more in line with the expected pattern

2. scoll-snap-padding/margin

You can also define the inside/outside of the container in the same way as you would with the padding/margin -top, etc. Using the padding leaves a blank space in the specified direction.

Scrolling: -webkit-overflow-scrolling: touch; < p style = "margin-top: 0pt; margin-top: 0pt; margin-top: 0pt; Make the child element slide a little silky

Child elements

1. scoll-snap-align

  • Act on a child element and define the adsorption point of the child element

  • Start binds the child element to the starting point of the container’s sliding direction

  • Center holds the child element in the middle

  • End makes the child element stick behind the container slide

2. scroll-snap-stop

  • Defines the sliding representation of child elements
  • The default valuenormolIn this case, you can slide more than one child element at a time

  • alwaysYou must stop at the child element that defines this value. If a sequence of child elements defines this value, you will have the effect of turning the page, which means you can only cross one or the next element at a time. (To achieve this effect, you must have only one child element to fill the container.

Focus on

In fact, scoll- Snap is generally easy to use, using a simple two lines of code can replace the third-party JS dependency

The parent container:

scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
Copy the code

A container:

scroll-snap-align: start;
scroll-snap-stop: always;
Copy the code

support

I am river, front end intern one, article if there is wrong, please be corrected!