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

lastSeries 发布于2019-08-02 11:50 / 679人阅读

摘要：过去滚动捕捉只能通过实现，但现在得益于新的滚动捕捉模块，这种效果已经可以通过实现了。同时令人庆幸的是浏览器可以根据用户的滚动方式自动控制并判断是否利用捕捉点捕捉。

特别声明，本文翻译自@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，如下面的代码所示：

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

然后是样式：

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

}

/* ...你懂得 */

然后实现效果如下：

案例演示3

了解更多

这篇文章浅显地向大家介绍了一些语法知识，如果你有兴趣了解更多的用例和查看更多示例，下面有几篇不错的文章。

Practical CSS Scroll Snapping

实战CSS Scroll Snapping（整理自Practical CSS Scroll Snapping）

Well-Controlled Scrolling with CSS Scroll Snap

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53148.html

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

摘要：过去滚动捕捉只能通过实现，但现在得益于新的滚动捕捉模块，这种效果已经可以通过实现了。同时令人庆幸的是浏览器可以根据用户的滚动方式自动控制并判断是否利用捕捉点捕捉。特别声明，本文翻译自@alligatorio的Control Page Scroll in CSS Using Scroll Snapping一文，受限于译者能力，译文或存在不足，欢迎大家指出。如需转载，烦请注明出处。滚...

Tychio 2019-08-29 17:06 评论0 收藏0
CSS scroll snap points 实现渐进增强的滚动

摘要：渐近增强刚好最近看到这篇文章，如果结合每次滚动的时候每个条目始终在中间这样效果就更好了。效果如下查看浏览器支持情况遗憾的是目前只有和上的和原生支持需要前缀，好在这种可以当做渐进增强，即使浏览器不支持也不影响功能。前言前几天在 segmentfault 上看到有人问下面这个效果（segmentfault app 中的）怎么实现，感觉这个效果体验还不错（在移动端没有滚动条的情况能够提示...

CloudDeveloper 2019-08-29 10:59 评论0 收藏0
【译】通过例子解释 Debounce 和 Throttle

摘要：举例举例通过拖拽浏览器窗口，可以触发很多次事件。不支持，所以不能在服务端用于文件系统事件。总结将一系列迅速触发的事件例如敲击键盘合并成一个单独的事件。确保一个持续的操作流以每毫秒执行一次的速度执行。 Debounce 和 Throttle 是两个很相似但是又不同的技术，都可以控制一个函数在一段时间内执行的次数。当我们在操作 DOM 事件的时候，为函数添加 debounce 或者 th...

LeoHsiun 2019-08-23 11:34 评论0 收藏0
[译] 前端项目中常见的 CSS 问题

摘要：我们的例子中有个卡片项目，看起来没什么问题。这将改善移动端的用户体验，并使用户更容易访问。大图预览结论这里提到的所有问题都是我在前端开发工作中最常遇到的。你在中有没有经常遇到什么问题呢欢迎在评论区分享原文地址：Common CSS Issues For Front-End Projects 原文作者：Ahmad Shadeed 译者：Chor 快速摘要：近年来，跨浏览器的渲染和...

RiverLi 2019-08-23 18:13 评论0 收藏0
[译] 前端项目中常见的 CSS 问题

摘要：我们的例子中有个卡片项目，看起来没什么问题。这将改善移动端的用户体验，并使用户更容易访问。大图预览结论这里提到的所有问题都是我在前端开发工作中最常遇到的。你在中有没有经常遇到什么问题呢欢迎在评论区分享原文地址：Common CSS Issues For Front-End Projects 原文作者：Ahmad Shadeed 译者：Chor 快速摘要：近年来，跨浏览器的渲染和...

AbnerMing 2019-08-02 15:21 评论0 收藏0