译-使用Scroll Snapping实现CSS控制页面滚动

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

特别声明，本文翻译自@alligatorio的Control Page Scroll in CSS Using Scroll Snapping一文，受限于译者能力，译文或存在不足，欢迎大家指出。如需转载，烦请注明出处。

滚动捕捉「Scroll Snapping」是一项你肯定已经见过的技术。当实现得不佳时，它会十分惹人厌，给用户带来很差的浏览体验。但当实现得好的时候，它又会是用于实现展示内容的功能的好方法，如图片画廊。过去滚动捕捉只能通过JavaScript实现，但现在得益于新的CSS滚动捕捉模块「CSS Scroll Snap module」，这种效果已经可以通过CSS实现了。

同时令人庆幸的是浏览器可以根据用户的滚动方式自动控制并判断是否利用捕捉点「snap point」捕捉。这可以避免捕捉点阻碍平滑导航这种不好的用户体验。

让我们简要介绍一下CSS中的滚动捕捉是如何工作的。

概览

与CSS grid或者Flexbox的使用类似，滚动捕捉的使用需要定义父级/容器元素，容器内的子元素会根据容器元素上定义的规则进行捕捉。

Scroll Snapping的相关属性中有一些是应用在容器元素上的，而另一些则用于子元素。

容器元素属性：scroll-snap-type

容器元素上最重要的属性就是 scroll-snap-type 。它令一个普通元素成为一个捕捉容器「snap container」元素，并且通过这个属性可以定义滚动捕捉轴「snap axis」（取值可为： x , y , block , inline , both ），同时这个属性还可以定义滚动捕捉的严格性「strictness」（取值可为： none , proximity , mandatory ）.

假设你想要某个容器在y轴上滚动，并且在任何情况下都进行滚动捕捉，那么你可以这样使用 scroll-snap-type 属性：

.container {

  scroll-snap-type: y mandatory;

}

如果你想要在两个方向上都进行滚动捕捉，并且捕捉行为也不需要太过严格，那么你可以这样写：

.container {

  scroll-snap-type: both proximity;

}

scroll-padding

另一个作用于容器元素上的属性是 scroll-padding ，它允许为容器设置padding，以避免捕捉动作在容器的边缘触发。这个属性的赋值语法与padding属性的语法相同。

子元素属性：scroll-snap-align

在滚动容器元素的子元素中，scroll-snap-align可能会是最重要的属性。它可以接收以下几个值， none，start，end，center ，以指定元素是在开头、中间、还是结束时进行滚动捕获。基于滚动轴，并假设当前为从左到右的文本方向，那么start可以是顶部或左侧，而end可以是底部或右侧。

你必须要设置元素的scroll-snap-align属性值，因为它的初始值是none，这表示不会执行任何的捕捉。

scroll-margin

scroll-margin属性的使用方式与margin属性一样，它可以设置元素中的不同捕捉区域。

scroll-snap-stop

scroll-snap-stop属性的取值可以为： normal 和 always ，通过这个属性可以指定元素是否强制应用捕捉点，即使用户的滚动行为通常会导致跳过捕捉。这个属性的初始值为 normal 。

案例

接下来我们不再停留在理论和属性介绍上，来通过一些简单例子的演示一下吧。如果一个元素的滚动是基于y轴之上，且它的 scroll strictness 被设置为 mandatory ，如下面的代码所示：

<div class="container">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

</div>

.container {

  scroll-snap-type: y mandatory;

  overflow-y: scroll;

  border: 2px solid var(--gs0);

  border-radius: 8px;

  height: 33vh;

}

.container div {

  scroll-snap-align: start;

  height: 33vh;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 4rem;

}

.container div:nth-child(1) {

  background: hotpink;

  color: white;

}

.container div:nth-child(2) {

  background: azure;

}

.container div:nth-child(3) {

  background: blanchedalmond;

}

.container div:nth-child(4) {

  background: lightcoral;

  color: white;

}

那么它的效果会像这样：

案例演示1

相反地，将 scroll strictness 属性设置为 proximity ，那么捕捉行为将只会在 snap point 的近距离范围内发生。

.container {

  /* ... */

  scroll-snap-type: y proximity;

  overflow-y: scroll;

}

  /* ... */

案例演示2

最后，一起来看一下当「snap snapping」在两条轴上的滚动条上都产生的时候会是什么样子。图片画廊就是一个这种情况下的完美用例，而我们这里的容器也恰好是一个网格容器。

首先，写好HTML：

<div class="container2">

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

  <div>5</div>

  <div>6</div>

  <div>7</div>

  <div>8</div>

  <div>9</div>

</div>

然后是样式：

.container2 {

  display: grid;

  grid-template-columns: 100% 100% 100%;

  scroll-snap-type: both mandatory;

  overflow: scroll;

  border: 2px solid var(--gs0);

  border-radius: 8px;

  height: 33vh;

}

.container2 div {

  scroll-snap-align: start;

  height: 33vh;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 4rem;

}

.container2 div:nth-child(1) {

  background: hotpink;

  color: white;

}

.container2 div:nth-child(2) {

  background: azure;

}

.container2 div:nth-child(3) {

  background: blanchedalmond;

}

.container2 div:nth-child(4) {

  background: lightcoral;

  color: white;

}

.container2 div:nth-child(5) {

  background: rebeccapurple;

  color: white;

}

/* ...你懂得 */