CSS滚动捕捉

Your new development career awaits. Check out the latest listings.ads via Carbon

How often have you wished if there was a CSS feature that made it easy to create a scrollable container? CSS scroll snap can do that. In my early days of front-end development, I relied on Javascript plugin to create slider components. Sometimes, we need a simple way of quickly making an element as a scrollable container. We can do that, thanks to CSS scroll snap.

你有多少次希望能有一个CSS功能，让你轻松地创建一个可滚动的容器？CSS滚动快照可以做到这一点。在我早期的前端开发中，我依靠Javascript插件来创建滑块组件。有时，我们需要一个简单的方法来快速地使一个元素成为一个可滚动的容器。我们可以这样做，这要感谢CSS滚动快照。

In this article, I will walk you through CSS scroll snap basics. What’s make me excited is that I just learned CSS scroll snap, so all the details I will explain will be freshly written. Are you ready? Let’s dive in!

在这篇文章中，我将带领你了解CSS滚动快照的基本知识。让我兴奋的是，我刚刚学会了CSS滚动快照，所以我将解释的所有细节都是新写的。你准备好了吗？让我们开始吧!

With the rise of mobile and tablet devices, we need to design and build components that can be swiped with touch. Take, for example, a gallery component. The user can easily swipe to the left or right to see more images, rather than a hierarchical structure.

随着移动和平板设备的兴起，我们需要设计和构建可以用触摸来滑动的组件。以一个画廊组件为例。用户可以很容易地向左或向右滑动，看到更多的图片，而不是分层的结构。

According to the CSS spec, providing the developers with a well-controlled scrolling experience is one of the main reasons that introduced CSS scroll snap. It will enhance the user experience, and it will make it easier to implement scrolling experiences.

根据CSS规范，为开发者提供一个可控的滚动体验是引入CSS滚动快照的主要原因之一。它将增强用户体验，并使滚动体验的实现变得更加容易。

To create a scrolling container, here are the basic things that you will need:

要创建一个滚动的容器，以下是你需要的基本东西：

Using the overflow with a value other than visible.
使用overflow ，其值不是visible 。
A way to display the items next to each other (inline).
一种显示彼此相邻的项目的方法（内联）。

Let’s take an example.

让我们举一个例子。

<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> <di...