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

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

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

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

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

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

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

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

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

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

举个例子:

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

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

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

Scroll Snap 容器的严格性

我们不仅可以定义Scroll Snap的方向，还可以定义它的严格程度。这可以通过使用值的来实现。

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

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

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

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

滚动容器的

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

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

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

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

图片列表

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

注意，我使用作为的值。

请注意，滚动容器的。 这样做的目的是提供额外的空间，以便可以按预期显示。

头像列表

对于此用例，我感兴趣的是将作为的值。

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

请务必不要这样做。

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

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

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

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

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