如何使用 CSS 滚动捕捉

作者：Nada Rifki✏️

只需要 CSS 来自定义滚动而不是使用 JavaScript 的想法听起来很棒，不是吗？

今天，我将向您展示 CSS Scroll Snap 如何帮助您做到这一点。

那么 CSS Scroll Snap 起什么作用？

我敢打赌你肯定用过一些库来控制网站的滚动行为。我就用过，而且用过其中一些库的时候还挺郁闷的。

其中一些库可能会严重降低页面的性能和用户体验。

更不用说，当您通过新的设计更新增加更多复杂性时，处理它们有时产生的所有错误真的很痛苦。

这就是为什么我更喜欢使用这个简单的 CSS 功能，它允许我在我的页面上获得漂亮的滚动效果，而不必依赖 JavaScript 库。

这些属性还帮助我节省了大量时间。

简单来说，CSS Scroll Snap 会进行滚动捕捉，在每次滚动时将视口锁定在特定点（您指定的点）。

另一方面，线性滚动根据控制器的速率移动——无论是鼠标、触摸手势还是箭头键。

现在，让我们看看 CSS Scroll Snap 是如何工作的。

如果您想直接查看真实示例，请转到第三部分，我在其中使用几行 CSS 代码构建了 Instagram 轮播。

让我们开始吧。

CSS 滚动捕捉的工作原理

CSS Scroll Snap 通过应用两个主要属性来工作：scroll-snap-type和scroll-snap-align。

以下是您需要了解的有关每个方面的信息：

• 第一个，scroll-snap-type应用于父容器。它接受两个参数：捕捉方向和捕捉行为：

.container {
 scroll-snap-type: [ x | y | block | inline | both ] [ mandatory | proximity ];
}

关于捕捉行为参数：选择proximity会使捕捉仅出现在距离用户停止滚动最近的点。

另一方面，mandatory当用户滚动时，捕捉会在您选择的特定位置发生。

• 第二个，scroll-snap-align应用于容器的子项。

您可以在此处指定 x 轴和 y 轴的捕捉点：

.children {
 scroll-snap-align: [ none | start | end | center ]{1,2};
}

在我们继续之前，需要注意的是，除非您指定容器的溢出并赋予其固定的高度，否则这一切都不会起作用。

此外，如果子元素中的内容比父容器长，则切勿使用强制元素。否则，用户将无法看到该内容。

我们还需要熟悉另外两个属性：

1. scroll-padding（应用于父容器）与 CSS 的 padding 属性非常相似，作用相当于偏移量。此外scroll-padding-top，还有scroll-padding-bottom、scroll-padding-left和scroll-padding-right。
2. scroll-margin（应用于容器的子元素）也类似于 CSS 的边距属性，并作为起始元素。此外scroll-margin-top，还有scroll-margin-bottom、scroll-margin-left和scroll-margin-right。

如果您有兴趣了解有关所有滚动捕捉属性及其未来属性的更多信息，Mozilla 文档始终是一个很好的起点。

如何使用 CSS Scroll Snap 创建类似 Instagram 的轮播

为了帮助您更好地理解这个概念，我在codepen上制作了一个类似 Instagram 的小型轮播。

请在此处查看现场演示：

如您所见，它包含七个不同大小的盒子。

令我惊讶的是，除了添加下面的 CSS 行以自动使滚动捕捉到每个框之外，我们没有其他事情可做。

<style>
.container {
    width: 60vw;
    height: 70vh;
    margin: 15vh auto;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    color: white;
    background-color: oldlace;
    display: flex;
    align-items: center;
}

.child {
    margin-left: 0.5rem;
    height: 90%;
    scroll-snap-align: start;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.child:nth-child(1n) {
    background-color: darkorchid;
    flex: 0 0 80%;
}

.child:nth-child(2n) {
    background-color: indigo;
    flex: 0 0 60%;
}

.child:nth-child(3n) {
    background-color: navy;
    flex: 0 0 40%;
}

.child:nth-child(4n) {
    background-color: palegreen;
    flex: 0 0 50%;
}

.child:nth-child(5n) {
    background-color: yellow;
    flex: 0 0 80%;
}

.child:nth-child(6n) {
    background-color: orange;
    flex: 0 0 60%;
}

.child:nth-child(7n) {
    background-color: tomato;
    flex: 0 0 80%;
}
</style>

仅使用 JavaScript 来解决这个问题需要大量额外的工作。

CSS Scroll Snap 是否支持跨浏览器？

好的，现在让我们来讨论价值百万美元的问题：跨浏览器支持。

正如您在此处看到的，CSS Scroll Snap 功能在现代浏览器中得到了很好的支持。

您会遇到的唯一问题是 Internet Explorer 和 Firefox，它们需要旧版本的规格，您可以在此处找到。

此外，我建议您将该属性添加-webkit-overflow-scrolling: touch;到您的容器中以支持 iOS 设备。

结论

差不多就是这样！

这很简单，但有时它可以帮我省下几个小时的代码。试试用 JavaScript 实现滚动捕捉，然后为每个不同宽度的子元素重新计算捕捉点，你就会明白我的意思了。

如果您有任何问题或意见，请在评论区留言或在 Twitter 上关注我@RifkiNada。我一定会回复。

您的前端是否占用了用户的 CPU？

随着 Web 前端日益复杂，资源占用大的功能对浏览器的要求也越来越高。如果您有兴趣监控和跟踪生产环境中所有用户的客户端 CPU 使用率、内存使用率等数据，不妨尝试 LogRocket。

LogRocket就像 Web 应用的 DVR，记录 Web 应用或网站中发生的一切。您无需猜测问题发生的原因，而是可以汇总和报告关键的前端性能指标、重放用户会话以及应用程序状态、记录网络请求并自动显示所有错误。

实现 Web 应用程序调试方式的现代化 —开始免费监控。

如何使用 CSS Scroll Snap一文首先出现在LogRocket 博客上。