Detailed explanation of css sroll-snap-type attribute (tips to optimize scrolling)

(Learning video sharing: css video tutorial)

According to CSS Scroll Snap Module Level 1 specification , CSS has added a new batch of properties that can control scrolling, so that scrolling can obtain many beautiful interactions that originally required the intervention of JS scripts under the control of CSS alone.

Tips: Some of the Gif images captured in this article involve container scrolling, and the effect is not very good. You can click into the Demo to actually experience it.

sroll-snap-type

First look at sroll-snap-type It may be considered The core attribute style in the new scrolling specification.

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

It’s a bit difficult to understand just by looking at the definition. Simply put, this attribute specifies whether a container captures internal scrolling actions and specifies how to handle the scroll end state.

Syntax

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

For example, suppose we want a horizontally scrollable container. After each scroll, the child elements finally stay The position is not awkwardly divided, but is completely presented in the container. It can be written like this:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

ul {
    scroll-snap-type: x mandatory;
}

li {
    scroll-snap-align: center;
}　　

above scroll-snap-type: x mandatory, x means to capture the scroll in the x-axis direction, and mandatory means to force the element's stay position to the place we specify after the scroll ends.

The left side is how to write a normal scroll container, and the right side is after adding scroll-snap-:

The scrolling in the y-axis direction is the same, just simply change the scroll-snap-type:

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

##CodePen Demo -- CSS Scroll Snap Demo## The mandatory in

#scroll-snap-type and the other in proximity

scroll-snap-type The key point is mandatory and proximity.

• mandatory: Usually we use this in CSS code. The English meaning of mandatory is mandatory, which means that after the scrolling ends, the scrolling stop point must be mandatory. Stop at the place we specify

• proximity: English means close, close, approximately, in this attribute it means that after the scrolling ends, the scrolling stop point may It is the place where the scrolling stops, and it may also make additional moves and stop at the place we specify

In other words, as specified above

scroll- If the scroll container of snap-type: y proximity is not set additionally scroll-snap-margin/scroll-snap-padding, it may end up like this~awkward ~Position:

scroll-snap-type: both mandatory

当然，还有一种比较特殊的情况是，scroll-snap-type: both mandatory，表示横向与竖向的滚动，都会同时进行捕捉，也是可以的：

CodePen Demo -- CSS Scroll Snap Both mandatory Demo

scroll-snap-align

使用 scroll-snap-align 可以简单的控制将要聚焦的当前滚动子元素在滚动方向上相对于父容器的对齐方式。

其需要作用在父元素上，可选值有三个：

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

什么意思呢，看看示意图：

可以类比单个元素在 flexbox 里面的 justify-content 属性的 flex-start | flex-end | center，规定当前元素在主轴上相对父容器的对齐方式去理解。

再看看实际的 Demo ，将 scroll-snap-align 添加到滚动子容器上：

scroll-snap-align: start

使当前聚焦的滚动子元素在滚动方向上相对于父容器顶部对齐。

scroll-snap-align: center

使当前聚焦的滚动子元素在滚动方向上相对于父容器中心对齐。

scroll-snap-align: end

使当前聚焦的滚动子元素在滚动方向上相对于父容器底部对齐。

CodePen Demo -- CSS Scroll Snap Demo

不规则子元素滚动

如果子元素大小不一，也能有非常好的表现，使用 scroll-snap-align: center，使得不规则子元素在每次滚动后居于容器中间：

CodePen Demo -- CSS Scroll Snap 不规则子元素滚动 Demo

scroll-margin / scroll-padding

上述的 scroll-snap-align 很好用，可以控制滚动子元素与父容器的对齐方式。然而可选的值只有三个，有的时候我们希望进行一些更精细的控制时，可以使用 scroll-margin 或者 scroll-padding

其中：

• scroll-padding 是作用于滚动父容器，类似于盒子的 padding
• scroll-margin 是作用于滚动子元素，每个子元素的 scroll-margin 可以设置为不一样的值，类似于盒子的 margin

举个例子，在竖向滚动下，给滚动父容器添加一个 scroll-padding-top: 30px 等同于给每个子元素添加 ``scroll-margin-top: 30px`：

我们希望滚动子元素在 scroll-snap-align: start 的基础上，与容器顶部的距离为 30px：

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

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

li {
    scroll-snap-align: start;
}

总结一下就是，scroll-snap-align 可以对滚动之后的对齐方式进行简单控制，而配合 scroll-margin / scroll-padding 则可以进行精确控制。

废弃的 scroll-snap-points-x / scroll-snap-points-y

标准的发展过程，早年间的规范如今废除，这个了解一下即可，新标准现在是这几个，并且大部分浏览器已经兼容：

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

scroll-snap-stop 是一个仍处于实验室的标准，本文没有过多介绍，我自己在几个不同浏览器尝试了下，暂时没有发现浏览器支持这个属性，但是最新的标准里面是有关于它的明确的定义的。

实际应用，渐进增强

在实际应用中，应用在全屏滚动/广告banner上有很多用武之地：

 

CodePen Demo -- full screen scroll

当然，兼容性现在还是很大的问题：

不过在很多场景下，就算 scroll-snap- 相关几个属性暂不兼容，也不会对正常使用造成影响，所以在很多场景，这些属性都可以直接应用上去，对支持的浏览器提供更好的交互。

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of Detailed explanation of css sroll-snap-type attribute (tips to optimize scrolling). For more information, please follow other related articles on the PHP Chinese website!