【干货】使用 CSS Scroll Snap 优化滚动，提升用户体验！

悠悠 2023-01-05 14:22 386阅读 0赞

> 作者：Ahmad  
> 译者：前端小智  
> 来源：ishadee

> **点赞再看**，微信搜索\*\*【[大迁世界][Link 1]】\*\*,B站关注【[前端小智][Link 2]】这个没有大厂背景，但有着一股向上积极心态人。本文 `GitHub` https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。

最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。

**github 地址：[https://github.com/qq449245884/vue-okr-tree][https_github.com_qq449245884_vue-okr-tree]**

你是否经常希望有一个CSS特性可以轻松创建一个可滚动的容器? **CSS scroll snap** 可以做到这一点。在早期的前端开发中，我依靠 JS 插件来创建滑块组件。有时，我们需要一种简单的方法来快速将元素制作成可滚动的容器。现在，多亏了 **CSSS scroll snap** ，我们可以简单做到这一点。

## 为什么要使用 CSS Scroll Snap ##

随着移动设备和平板设备的兴起，我们需要设计和构建可以轻触的组件。 以图库组件为例。 用户可以轻松地向左或向右滑动以查看更多图像，而不是分层结构。

![bb538efb15e244b1a39c92ca521ca9f4.png][]

根据[CSS规范][CSS]，为开发者提供良好控制的滚动体验是引入 **CSS scroll snap**的主要原因之一。它增强了用户体验，并使其更容易实现滚动体验。

## 滚动容器的基础知识 ##

要创建一个滚动容器，以下是我们需要做的基本内容

*  使用 `overflow`
 *  一种将项目彼此相邻显示（内联）的方法

举个例子:

.section {
      white-space: nowrap;
      overflow-x: auto;
    }

多年来，使用`white-space: nowrap`是一种流行的CSS解决方案，用于强制元素保持内联。不过，现在我们基本都使用 `Flexbox` :

.section {
      display: flex;
      overflow-x: auto;
    }

![987a1267ae68a6fb7bb593acc7e66779.png][]

这是创建滚动容器的基本方法。然而，这还不够，这不是一个可用的滚动容器。

## 滚动容器有什么问题 ##

问题是，与滑动相比，它们并不能提供良好的体验。在触摸屏上滑动手势的主要好处是，我们可以用一根手指水平或垂直滚动。

![797df69ab110a41870aa0d77da34721d.gif][]

实际上需要将每个项目移动到它自己的位置。这并不是滑动，这是一种非常糟糕的体验，通过使用**CSS scroll snap**，我们可以通过简单地定义**snap points**来解决这个问题，它将使用户更容易地水平或垂直滚动。

接着，我们来看看如何使用**CSS scroll snap**。

## CSS Scroll Snap 简介 ##

要在容器上使用**scroll snap**，它的子项目应该内联显示，这可以用我上面解释的方法之一来实现。我选择CSS flexbox:

.section {
      display: flex;
      overflow-x: auto;
    }

了这个，我们需要添加另外两个属性来让**scroll snap**工作。我们应该在哪里添加它们?

首先，我们需要将`scroll-snap-type`添加到滚动容器中。 在我们的示例中，是`.section`元素。 然后，我们需要向子项（即`.section__item`）添加`scrolln-snap-align`。

.section {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
    }
    
    .section__item {
      scroll-snap-align: start;
    }

这里你可能想知道`x mandatory`和`start`是干嘛用的。 不用担心，这是本文的核心，下面会对其进行深入的讲解。

![5d02c8deb6c42cf6106a27311859eac4.gif][]

这一刻，我对**CSS scroll snap**非常兴奋,它使滚动更加自然。现在，让我们深入研究**scroll snap** 属性。

## Scroll Snap Type ##

根据[CSS规范][CSS 1]，\*\*scroll-snap-type \*\* 属性定义在滚动容器中的一个临时点（snap point）如何被严格的执行。

#### 滚动容器的轴线 ####

滚动容器的轴表示滚动方向，它可以是水平或垂直的，`x`值表示水平滚动，而`y`表示垂直滚动。

/* 水平*/
    .section {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x;
    }
    
    /* 垂直*/
    .section {
      height: 250px;
      overflow-y: auto;
      scroll-snap-type: y;
    }

![4d1e530ef8b1e30bc06ef9ddc31c7116.png][]

#### Scroll Snap 容器的严格性 ####

我们不仅可以定义Scroll Snap的方向，还可以定义它的严格程度。这可以通过使用`scroll-snap-type`值的`andatory | proximity`来实现。

> `mandatory`：如果它当前没有被滚动，这个滚动容器的可视视图将静止在临时点上。意思是当滚动动作结束，如果可能，它会临时在那个点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。

`mandatory`关键字意味着浏览器必须捕捉到每个滚动点。假设`roll-snap-align`属性有一个`start`值。这意味着，滚动必须对齐到滚动容器的开始处。

在下图中，每次用户向右滚动时，浏览器都会将项目捕捉到容器的开头。

![be2c0719a4ee91621cfa99e1230f326e.png][]

.section {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
    }
    
    .section__item {
      scroll-snap-align: start;
    }

![3f02a4e5620e3b38fc666c54a4274334.gif][]

试着在下面的演示中向右滚动。如果你使用的是手机或平板电脑，可以向右移动滚动条或使用触摸。应该能感受到每个项目是如何从其容器的开始抓取的。

演示地址：https://codepen.io/shadeed/pen/RwGaXKB

但是，如果该值是`proximity`，则浏览器将完成这项工作，它可能会吸附到定义的点(在我们的例子中`start`)。注意，`proximity` 是默认值，但是为了清晰起见，我们这里还是声明一下它。

![3664e8095e73ec4b0c7ddd5cb72b5f39.png][]

.section {
      display: flex;
      overflow-x: auto;
      /* proximity is the default value, I added it for clarity reasons */
      scroll-snap-type: x proximity;
    }

![32b0f528102a94ce65c7655925d8c7d9.gif][]

## Scroll Snapping Alignment ##

滚动容器的子项目需要一个对齐点，它们可以对齐到这个点。我们可以用`start`, `center`或`end`。

为了更容易理解，下面是它的工作原理。

![ad7c8e6e6811899f1ff6c5cc1cbdf0cc.png][]

假设我们在滚动容器上有一块磁铁，这将有助于我们控制捕捉点。 如果`scroll-snap-type`是垂直的，则对齐对齐将是垂直的。 参见下图：

![4743ccce85fc7538ed97de6fe3d7c822.png][]

#### 滚动容器的 `start` ####

子项目将吸附到其水平滚动容器的开始处。

![1b6acd32d24c432359a4c190b26c354c.gif][]

#### 滚动容器的 `center` ####

子项目将吸附到其滚动容器的中心。

![8e394801dcbb21eeff79ad947beb6eaf.gif][]

#### 滚动容器的 `end` ####

子项将对齐到其滚动容器的末尾。

![1296f4e3cb70669910b8f45bc10f94b3.gif][]

## 使用 Scroll-Snap-Stop ##

有时，我们可能需要一种方法来防止用户在滚动时意外跳过一些重要的项。如果用户滚动太快，就有可能跳过某些项。

.section__item {
      scroll-snap-align: start;
      scroll-snap-stop: normal;
    }

法动太快可能会跳过三个或四个项目，如下所示：

![f7a8d3523cb06082281cf4c2fd2c361e.gif][]

`scroll-snap-stop`的默认值是`normal`,要强制滚动捕捉到每个可能的点，应使用`always`。

.section__item {
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

![0fd6b395062cdb833737a1c66f5c910f.gif][]

这样，用户可以一次滚动到一个捕捉点，这种方式有助于避免跳过重要内容。 想象每个停止点都有一个停止标志，参见下面的动画：

![eddc9d25f91a2a91e79fc821efb5f877.gif][]

演示地址：https://codepen.io/shadeed/pen/JjRbXza

## Scroll Snap Padding ##

`scroll-padding`设置所有侧面的滚动边距，类似于`padding`属性的工作方式。 在下图中，滚动容器的左侧有`50px`的内边距。 结果，子元素将从左侧边缘捕捉到`50px`

![8261d85e9dd443b61b01d17af8f4e18b.png][]

直滚动也是如此。参见下面的示例：

.section {
      overflow-y: auto;
      scroll-snap-type: y mandatory;
      scroll-padding: 50px 0 0 0;
    }

![9c1f7bdb4254d933301e25c3359e8030.png][]

## Scroll Snap Margin ##

`scroll-margin`设置滚动容器的子项之间的间距。 在向元素添加边距时，滚动将根据边距对齐。 参见下图：

![b6ce3f34d1185ee3e1b7fb4177119e2d.png][]

`.item-2`具有`scroll-margin-left: 20px`。 结果，滚动容器将在该项目之前对齐到`20px`。 请注意，当用户再次向右滚动时，.item-3会捕捉到滚动容器的开头，这意味着仅具有边距的元素将受到影响。

## CSS Scroll Snap 用例 ##

#### 图片列表 ####

scroll snap 的一个很好的用例是图像列表，使用 scroll snap 提供更好的滚动体验。

![378100d299fefe2cc4df736964ff906f.png][]

.images-list {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x;
      gap: 1rem;
      -webkit-overflow-scrolling: touch; /* Important for iOS devices */
    }
    
    .images-list img {
      scroll-snap-align: start;
    }

注意，我使用`x`作为`scroll-snap-type`的值。

![62930f1cfb0c461774ace0f84ee01a0c.gif][]

事例地址:https://codepen.io/shadeed/pen/jOMrxYO

#### 好友清单 ####

滚动捕捉的另一个很好的用例是朋友列表。 下面的示例摘自Facebook（一个真实的示例）。

![ad8da8596c7f8568cad07275b79aadd0.png][]

.list {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 1rem;
      scroll-padding: 48px;
      padding-bottom: 32px;
      -webkit-overflow-scrolling: touch;
    }
    
    .list-item {
      scroll-snap-align: start;
    }

请注意，滚动容器的`padding-bottom：32px`。 这样做的目的是提供额外的空间，以便`box-shadow`可以按预期显示。

![b10311f554654821290401510acae7be.png][]

#### 头像列表 ####

对于此用例，我感兴趣的是将`center`作为`scroll-snap-align`的值。

![1efb6b78c28ef3fb42503b5b14d596b1.png][]

.list {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }
    
    .list-item {
      scroll-snap-align: center;
    }

这在一个角色列表中是很有用的，角色在滚动容器的中间是很重要的

![ad43730ea25614a57b7670fd290ba348.gif][]

演示地址：https://codepen.io/shadeed/pen/KKgMJWa

## 全屏展示 ##

使用**scroll snap**也可以用于垂直滚动，全屏展示就是一个很好的例子。

![3fda136e217f3dc571c5718e45804b68.png][]

main {
      height: 100vh;
      overflow-y: auto;
      scroll-snap-type: y mandatory;
      -webkit-overflow-scrolling: touch;
    }
    
    .section {
      height: 100vh;
      scroll-snap-align: start;
    }

![03fb9466cb0b4191a66407fa1c092ea3.gif][]

### 块和内联 ###

值得一提的是，对于scroll-snap-type，可以使用`inline`和`block`逻辑值。参见下面的示例

main {
      scroll-snap-type: inline mandatory;
    }

#### 可读性 ####

使用 CSS scroll snap时，请确保可访问性。 这是滚动对齐的一种不好用法，它阻止用户自由滚动内容以读取内容。

.wrapper {
      scroll-snap-type: y mandatory;
    }
    
    h2 {
      scroll-snap-align: start;
    }

![bcc1da6867d555f1c2bd940099c24c2e.png][]

![19cd64f34e2d09b8740e723a39856fb8.gif][]

请务必不要这样做。

## 总结 ##

这是我刚刚学到的一个新的CSS特性的长篇文章。我希望它对你有用。

我是小智，我们下期在见！

--------------------

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

原文：https://ishade.com/article/css-scroll-snap/

## 交流 ##

文章每周持续更新，可以微信搜索 **【大迁世界 】** 第一时间阅读，回复 **【福利】** 有多份前端视频等着你，本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，欢迎Star。

[Link 1]: https://mp.weixin.qq.com/s/sY9ufGGKfcdaAQ7KJQs3HA
[Link 2]: https://space.bilibili.com/31089477
[https_github.com_qq449245884_vue-okr-tree]: https://github.com/qq449245884/vue-okr-tree
[bb538efb15e244b1a39c92ca521ca9f4.png]: /images/20221119/ca82c365b1a14cb48e2b49a8b101a183.png
[CSS]: https://drafts.csswg.org/css-scroll-snap-1/#intro
[987a1267ae68a6fb7bb593acc7e66779.png]: /images/20221119/2149e68f833e42f7b4a8d320b7b9d925.png
[797df69ab110a41870aa0d77da34721d.gif]: /images/20221119/866766e5bfce40dabfab8e759eb1245c.png
[5d02c8deb6c42cf6106a27311859eac4.gif]: https://img-blog.csdnimg.cn/img_convert/5d02c8deb6c42cf6106a27311859eac4.gif
[CSS 1]: https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type
[4d1e530ef8b1e30bc06ef9ddc31c7116.png]: https://img-blog.csdnimg.cn/img_convert/4d1e530ef8b1e30bc06ef9ddc31c7116.png
[be2c0719a4ee91621cfa99e1230f326e.png]: https://img-blog.csdnimg.cn/img_convert/be2c0719a4ee91621cfa99e1230f326e.png
[3f02a4e5620e3b38fc666c54a4274334.gif]: https://img-blog.csdnimg.cn/img_convert/3f02a4e5620e3b38fc666c54a4274334.gif
[3664e8095e73ec4b0c7ddd5cb72b5f39.png]: https://img-blog.csdnimg.cn/img_convert/3664e8095e73ec4b0c7ddd5cb72b5f39.png
[32b0f528102a94ce65c7655925d8c7d9.gif]: https://img-blog.csdnimg.cn/img_convert/32b0f528102a94ce65c7655925d8c7d9.gif
[ad7c8e6e6811899f1ff6c5cc1cbdf0cc.png]: https://img-blog.csdnimg.cn/img_convert/ad7c8e6e6811899f1ff6c5cc1cbdf0cc.png
[4743ccce85fc7538ed97de6fe3d7c822.png]: https://img-blog.csdnimg.cn/img_convert/4743ccce85fc7538ed97de6fe3d7c822.png
[1b6acd32d24c432359a4c190b26c354c.gif]: https://img-blog.csdnimg.cn/img_convert/1b6acd32d24c432359a4c190b26c354c.gif
[8e394801dcbb21eeff79ad947beb6eaf.gif]: https://img-blog.csdnimg.cn/img_convert/8e394801dcbb21eeff79ad947beb6eaf.gif
[1296f4e3cb70669910b8f45bc10f94b3.gif]: https://img-blog.csdnimg.cn/img_convert/1296f4e3cb70669910b8f45bc10f94b3.gif
[f7a8d3523cb06082281cf4c2fd2c361e.gif]: https://img-blog.csdnimg.cn/img_convert/f7a8d3523cb06082281cf4c2fd2c361e.gif
[0fd6b395062cdb833737a1c66f5c910f.gif]: https://img-blog.csdnimg.cn/img_convert/0fd6b395062cdb833737a1c66f5c910f.gif
[eddc9d25f91a2a91e79fc821efb5f877.gif]: https://img-blog.csdnimg.cn/img_convert/eddc9d25f91a2a91e79fc821efb5f877.gif
[8261d85e9dd443b61b01d17af8f4e18b.png]: https://img-blog.csdnimg.cn/img_convert/8261d85e9dd443b61b01d17af8f4e18b.png
[9c1f7bdb4254d933301e25c3359e8030.png]: https://img-blog.csdnimg.cn/img_convert/9c1f7bdb4254d933301e25c3359e8030.png
[b6ce3f34d1185ee3e1b7fb4177119e2d.png]: https://img-blog.csdnimg.cn/img_convert/b6ce3f34d1185ee3e1b7fb4177119e2d.png
[378100d299fefe2cc4df736964ff906f.png]: https://img-blog.csdnimg.cn/img_convert/378100d299fefe2cc4df736964ff906f.png
[62930f1cfb0c461774ace0f84ee01a0c.gif]: https://img-blog.csdnimg.cn/img_convert/62930f1cfb0c461774ace0f84ee01a0c.gif
[ad8da8596c7f8568cad07275b79aadd0.png]: https://img-blog.csdnimg.cn/img_convert/ad8da8596c7f8568cad07275b79aadd0.png
[b10311f554654821290401510acae7be.png]: https://img-blog.csdnimg.cn/img_convert/b10311f554654821290401510acae7be.png
[1efb6b78c28ef3fb42503b5b14d596b1.png]: https://img-blog.csdnimg.cn/img_convert/1efb6b78c28ef3fb42503b5b14d596b1.png
[ad43730ea25614a57b7670fd290ba348.gif]: https://img-blog.csdnimg.cn/img_convert/ad43730ea25614a57b7670fd290ba348.gif
[3fda136e217f3dc571c5718e45804b68.png]: https://img-blog.csdnimg.cn/img_convert/3fda136e217f3dc571c5718e45804b68.png
[03fb9466cb0b4191a66407fa1c092ea3.gif]: https://img-blog.csdnimg.cn/img_convert/03fb9466cb0b4191a66407fa1c092ea3.gif
[bcc1da6867d555f1c2bd940099c24c2e.png]: https://img-blog.csdnimg.cn/img_convert/bcc1da6867d555f1c2bd940099c24c2e.png
[19cd64f34e2d09b8740e723a39856fb8.gif]: https://img-blog.csdnimg.cn/img_convert/19cd64f34e2d09b8740e723a39856fb8.gif
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi
[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi