likes
comments
collection
share

2022年你应该需要知道的CSS新特性-交互篇

作者站长头像
站长
· 阅读数 144

Hi~，我是一碗周，如果写的文章有幸可以得到你的青睐，万分有幸~

🍎 写在前面

前一段时间State of CSS发起了2022年的调查问卷，该文件的内容主要是CSS新特性、框架、工具库的使用情况，这里我将会用几篇文章整理一下这个问卷中涉及到的新特性。

这篇文章将介绍如下内容：

  • CSS滚动捕捉
  • overscroll-behavior属性
  • scroll-behavior属性
  • scrollbar-gutter属性

该系列文章一共有6篇，链接如下：

🍈 CSS滚动捕捉

与CSS滚动捕捉相关的属性可以分为两类：

  • 作用在父容器上的属性：scroll-snap-type、scroll-padding*；

    其实还有一个scroll-snap-stop属性，但是这个属性我实在没有测试出效果，这里就掠过吧

  • 作用在子元素上的属性：scroll-snap-align、scroll-margin*。

我们先来看一下scroll-snap-type属性，MDN中给的定义是在滚动容器中的一个临时点（snap point）如何被严格的执行。说人话就是这个属性定义了一个容器如何处理滚动的结束状态，如果还是不明白我们直接先看一个例子：

上面这个例子中，当切换scroll-snap-type: x mandatory;时，在混动的时候子元素最终停留的位置一定是子元素的开头，不会出现各占一半的尴尬情况。

上面例子中的核心代码如下：

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

.scroll .item {
  /* 必要属性 */
  scroll-snap-align: start;
}

这里我们就来解释一下上面的代码：

  • scroll-snap-type的x表示在x轴滚动，除x外还包含y | block | inline | both；

  • scroll-snap-type的mandatory表示强制滚动到我们指定的位置；

    除mandatory还存在proximity，这个值表示看当前的情况，决定是否滚动到指定位置（这里可以通过上面的例子自行体验区别）；

  • scroll-snap-align的start表示当前滚动子元素在滚动方向上相对于父容器的对齐方式，有三个值，分别是start、center和end。

scroll-snap-align三个值的区别如下所示：

我们可以切换来查看不同值的不同效果。

剩下的两个属性scroll-padding*和scroll-margin*可以精确的控制滚动的偏移量，这里就不演示了，感兴趣的小伙伴可以自行体验。

最后提一下，这几个属性的浏览器兼容性非常良好，除了IE都支持，就算是写了IE不支持也没有什么坏影响。

🍑 overscroll-behavior属性

CSS中的overscroll-behavior是一个合并写法，可以拆分为overscroll-behavior-x和overscroll-behavior-y，它控制的是当元素滚动到边界后继续滚动的效果。

它的值有三个，分别是

  • auto：默认效果；
  • contain：依旧触发滚动到底部的效果（反弹），但是临近的滚动区域不会被影响；
  • none：不会触发触底效果也不会影响临近的滚动区域。

示例如下：

当overscroll-behavior的值为auto时，在列表区域滚动到底时会影响其他区域的滚动，当不为auto时就不会影响其他区域的滚动。

这个属性的浏览器兼容性很不错，可以放心使用。

🍒 scroll-behavior属性

CSS中的scroll-behavior属性可以为浏览器的滚动行为添加一个动画效果，它有两个值，一个是auto，另一个就是smooth，第二个值就可以为默认的滚动效果添加动画，示例如下：

浏览器兼容情况如下：

2022年你应该需要知道的CSS新特性-交互篇

除了IE基本都支持。

🍓 scrollbar-gutter属性

CSS中的scrollbar-gutter属性的出现了解决了一个经典的问题：当页面出现与隐藏滚动条时页面跳动的问题；出现这个问题的原因是因为滚动条会占据页面的宽度，所以隐藏和显示时可用宽度或者高度会减少。

这个属性有三个值：

  • auto：默认表现；
  • stable：如果元素的overflow的计算值不是visible，则会预留除滚动条的位置，这样出现滚动条时也不会跳动；
  • both-edges：为两侧都预留空白，可以让其绝对的居中对齐，要配合stable一起使用。

示例代码如下：

例子中的主要核心代码如下：

.auto {
  scrollbar-gutter: auto;
}

.stable {
  scrollbar-gutter: stable;
}

.both-edges {
  scrollbar-gutter: stable both-edges;
}

浏览器兼容情况如下：

2022年你应该需要知道的CSS新特性-交互篇

🥝 写在最后

**今天介绍的几个CSS新属性都完全可以在生产环境使用，而且不需要做兜底，**就算是浏览器不兼容也无伤大雅，不会有任何不确定的事情发生。

如果对本篇文章对你有所帮助，可以点赞收藏评论支持一下我；如果有所疑问，欢迎私信~

转载自:https://juejin.cn/post/7160614804359479304
评论
请登录