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

做者：Ahmad
译者：前端小智
来源：ishadee

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

最近开源了一个 Vue 组件，还不够完善，欢迎你们来一块儿完善它，也但愿你们能给个 star 支持一下，谢谢各位了。

github 地址：https://github.com/qq44924588...

你是否常常但愿有一个CSS特性能够轻松建立一个可滚动的容器? CSS scroll snap 能够作到这一点。在早期的前端开发中，我依靠 JS 插件来建立滑块组件。有时，咱们须要一种简单的方法来快速将元素制做成可滚动的容器。如今，多亏了 CSSS scroll snap ，咱们能够简单作到这一点。

为何要使用 CSS Scroll Snap

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

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

滚动容器的基础知识

要建立一个滚动容器，如下是咱们须要作的基本内容

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

举个例子:

<div class="section">
  <div class="section__item">Item 1</div>
  <div class="section__item">Item 2</div>
  <div class="section__item">Item 3</div>
  <div class="section__item">Item 4</div>
  <div class="section__item">Item 5</div>
</div>

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

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

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

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

滚动容器有什么问题

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

实际上须要将每一个项目移动到它本身的位置。这并非滑动，这是一种很是糟糕的体验，经过使用CSS scroll snap，咱们能够经过简单地定义snap points来解决这个问题，它将使用户更容易地水平或垂直滚动。

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

CSS Scroll Snap 简介

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

<div class="section">
  <div class="section__item">Item 1</div>
  <div class="section__item">Item 2</div>
  <div class="section__item">Item 3</div>
  <div class="section__item">Item 4</div>
  <div class="section__item">Item 5</div>
</div>

.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是干吗用的。 不用担忧，这是本文的核心，下面会对其进行深刻的讲解。

这一刻，我对CSS scroll snap很是兴奋,它使滚动更加天然。如今，让咱们深刻研究scroll snap 属性。

Scroll Snap Type

根据CSS规范，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;
}

Scroll Snap 容器的严格性

咱们不只能够定义Scroll Snap的方向，还能够定义它的严格程度。这能够经过使用scroll-snap-type值的andatory | proximity来实现。

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

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

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

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

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

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

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

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

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

Scroll Snapping Alignment

滚动容器的子项目须要一个对齐点，它们能够对齐到这个点。咱们能够用start, center或end。

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

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

滚动容器的 start

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

滚动容器的 center

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

滚动容器的 end

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

使用 Scroll-Snap-Stop

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

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

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

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

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

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

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

Scroll Snap Padding

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

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

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

Scroll Snap Margin

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

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

CSS Scroll Snap 用例

图片列表

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

.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的值。

事例地址:https://codepen.io/shadeed/pe...

好友清单

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

.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能够按预期显示。

头像列表

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

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

.list-item {
  scroll-snap-align: center;
}

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

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

全屏展现

使用scroll snap也能够用于垂直滚动，全屏展现就是一个很好的例子。

<main>
  <section class="section section-1"></section>
  <section class="section section-2"></section>
  <section class="section section-3"></section>
  <section class="section section-4"></section>
  <section class="section section-5"></section>
</main>

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

.section {
  height: 100vh;
  scroll-snap-align: start;
}

块和内联

值得一提的是，对于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;
}

请务必不要这样作。

总结

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

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

---

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

原文：https://ishade.com/article/cs...

交流

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