Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to use sroll-snap-type to optimize scrolling". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Use sroll-snap-type to optimize scrolling sroll-snap-type

First of all, let's take a look at sroll-snap-type, which is probably the core attribute style in the new scrolling specification.

Scroll-snap-type: the property defines how a temporary point (snap point) in the scrolling container is strictly executed.

Just looking at the definition is a bit difficult to understand. simply put, this property specifies whether a container captures the internal scrolling action and how to handle the scrolling end state.

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

For example, suppose we want a horizontally scrollable container, and after each scrolling, the final stop position of the child element is not awkwardly segmented, but completely presented in the container, which can be written as follows:

1 2 3ul {scroll-snap-type: x mandatory;} li {scroll-snap-align: center;}

In scroll-snap-type: X mandatory above, x means to capture scrolling in the x-axis direction, and mandatory means to force the rest position of the element to be set to our specified place after scrolling ends.

The normal scrolling container is written on the left, and the scroll-snap- is added on the right:

If the scrolling is the same in the y-axis direction, you just need to simply change the scroll-snap-type:

Ul {scroll-snap-type: y mandatory;}

CodePen Demo-CSS Scroll Snap Demo

Mandatory and proximity in scroll-snap-align

Another key point in scroll-snap-align is mandatory and proximity.

Mandatory: we usually use this in CSS code. Mandatory means mandatory in English, which means that after scrolling is over, the scrolling stop point must be forced to stop at the place we specify.

Proximity: in English, it means close, near, about. In this attribute, it means that after scrolling is over, the scrolling stop point may be where the scrolling stops, or there may be additional movements to stop at the place we specify.

That is to say, if the scroll container of scroll-snap-align: y proximity is specified above, it is possible to park in an awkward position like this if you do not set scroll-snap-margin/scroll-snap-padding:

Scroll-snap-type: both mandatory

Of course, there is also a special case, scroll-snap-type: both mandatory, which means that both horizontal and vertical scrolling will be captured at the same time, which is also possible:

CodePen Demo-CSS Scroll Snap Both mandatory Demo

Scroll-snap-align

Using scroll-snap-align, you can simply control the alignment of the current scroll child element that will be focused in the scrolling direction relative to the parent container.

It needs to act on the parent element, and there are three optional values:

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

What do you mean, look at the diagram:

It can be compared to the flex-start | flex-end | center of the justify-content attribute of a single element in flexbox, which specifies the alignment of the current element on the principal axis relative to the parent container.

Then take a look at the actual Demo and add scroll-snap-align to the scroll sub-container:

Scroll-snap-align: start

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

Scroll-snap-align: center

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

Scroll-snap-align: end

Aligns the currently focused scroll child element in the scrolling direction relative to the bottom of the parent container.

CodePen Demo-CSS Scroll Snap Demo

Irregular child element scrolling

If the child elements are of different sizes, they can also perform very well. Use scroll-snap-align: center so that the irregular child elements reside in the middle of the container after each scroll:

CodePen Demo-- CSS Scroll Snap irregular child element scrolling Demo

Scroll-margin / scroll-padding

The above scroll-snap-align is easy to use and can control how the scrolling child elements are aligned with the parent container. However, there are only three optional values, and sometimes when we want some finer control, we can use scroll-margin or scroll-padding

Where:

Scroll-padding is a padding that acts as a scrolling parent container, similar to a box

Scroll-margin acts on scroll child elements, and the scroll-margin of each child element can be set to a different value, similar to the margin of the box.

For example, adding a scroll-padding-top: 30px to the scrolling parent container under vertical scrolling is equivalent to adding ``scroll-margin-top: 30px` to each child element:

We want the scroll child element to be 30px on the basis of scroll-snap-align: start and the top of the container:

1 2 3. .snap {overflow-x: auto; scroll-snap-type: y mandatory; scroll-padding-top: 30px;} li {scroll-snap-align: start;}

To sum up, scroll-snap-align can have simple control over the alignment after scrolling, while with scroll-margin / scroll-padding you can have precise control.

Abandoned scroll-snap-points-x / scroll-snap-points-y

The development of the standard, the early specification is now abolished, you can learn about this, the new standards are now these, and most browsers are already compatible:

Scroll-snap-type

Scroll-snap-align

Scroll-margin / scroll-padding

Scroll-snap-stop

Scroll-snap-stop is a standard that is still in the laboratory, which is not described much in this article. I have tried it in several different browsers and haven't found that browsers support this property yet, but there is a clear definition of it in the latest standard.

Practical application, progressive enhancement

In practical applications, there are many opportunities for applications to show their talents on full-screen scrolling / advertising banner:

CodePen Demo-full screen scroll

Of course, compatibility is still a big problem:

However, in many scenarios, even if several attributes related to scroll-snap- are not compatible, it will not affect normal use, so in many scenarios, these attributes can be directly applied to provide better interaction to supported browsers.

This is the end of "how to use sroll-snap-type optimized scrolling". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.