乐趣区

关于前端:使用-CSS-Scroll-Snap-优化滚动提升用户体验

作者:Ahmad
译者:前端小智
起源:ishadee

有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

你是否常常心愿有一个 CSS 个性能够轻松创立一个可滚动的容器? CSS scroll snap 能够做到这一点。在晚期的前端开发中,我依附 JS 插件来创立滑块组件。有时,咱们须要一种简略的办法来疾速将元素制作成可滚动的容器。当初,多亏了 CSSS scroll snap,咱们能够简略做到这一点。

为什么要应用 CSS Scroll Snap

随着挪动设施和平板设施的衰亡,咱们须要设计和构建能够轻触的组件。以图库组件为例。用户能够轻松地向左或向右滑动以查看更多图像,而不是分层构造。

依据 CSS 标准,为开发者提供良好管制的滚动体验是引入 CSS scroll snap的次要起因之一。它加强了用户体验,并使其更容易实现滚动体验。

滚动容器的基础知识

要创立一个滚动容器,以下是咱们须要做的根本内容

  • 应用 overflow
  • 一种将我的项目彼此相邻显示(内联)的办法

举个例子:

<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>
  <div class="section__item">Item 5</div>
</div>
.section {
  white-space: nowrap;
  overflow-x: auto;
}

多年来,应用 white-space: nowrap 是一种风行的 CSS 解决方案,用于强制元素放弃内联。不过,当初咱们根本都应用 Flexbox :

.section {
  display: flex;
  overflow-x: auto;
}

这是创立滚动容器的根本办法。然而,这还不够,这不是一个可用的滚动容器。

滚动容器有什么问题

问题是,与滑动相比,它们并不能提供良好的体验。在触摸屏上滑动手势的次要益处是,咱们能够用一根手指程度或垂直滚动。

实际上须要将每个我的项目挪动到它本人的地位。这并不是滑动,这是一种十分蹩脚的体验,通过应用 CSS scroll snap,咱们能够通过简略地定义snap points 来解决这个问题,它将使用户更容易地程度或垂直滚动。

接着,咱们来看看如何应用CSS scroll snap

CSS Scroll Snap 简介

要在容器上应用scroll snap,它的子项目应该内联显示,这能够用我下面解释的办法之一来实现。我抉择 CSS flexbox:

<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>
  <div class="section__item">Item 5</div>
</div>
.section {
  display: flex;
  overflow-x: auto;
}

了这个,咱们须要增加另外两个属性来让 scroll snap 工作。咱们应该在哪里增加它们?

首先,咱们须要将 scroll-snap-type 增加到滚动容器中。在咱们的示例中,是 .section 元素。而后,咱们须要向子项(即.section__item)增加scrolln-snap-align

.section {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.section__item {scroll-snap-align: start;}

这里你可能想晓得 x mandatorystart是干嘛用的。不必放心,这是本文的外围,上面会对其进行深刻的解说。

这一刻,我对 CSS scroll snap 十分兴奋, 它使滚动更加天然。当初,让咱们深入研究scroll snap 属性。

Scroll Snap Type

依据 CSS 标准,scroll-snap-type 属性定义在滚动容器中的一个长期点(snap point)如何被严格的执行。

滚动容器的轴线

滚动容器的轴示意滚动方向,它能够是程度或垂直的,x值示意程度滚动,而 y 示意垂直滚动。

/* 程度 */
.section {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x;
}

/* 垂直 */
.section {
  height: 250px;
  overflow-y: auto;
  scroll-snap-type: y;
}

Scroll Snap 容器的严格性

咱们不仅能够定义 Scroll Snap 的方向,还能够定义它的严格水平。这能够通过应用 scroll-snap-type 值的 andatory | proximity 来实现。

mandatory:如果它以后没有被滚动,这个滚动容器的可视视图将静止在长期点上。意思是当滚动动作完结,如果可能,它会长期在那个点上。如果内容被增加、挪动、删除或者重置大小,滚动偏移将被调整为放弃静止在长期点上。

mandatory关键字意味着浏览器必须捕捉到每个滚动点。假如 roll-snap-align 属性有一个 start 值。这意味着,滚动必须对齐到滚动容器的开始处。

在下图中,每次用户向右滚动时,浏览器都会将我的项目捕捉到容器的结尾。

.section {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.section__item {scroll-snap-align: start;}

试着在上面的演示中向右滚动。如果你应用的是手机或平板电脑,能够向右挪动滚动条或应用触摸。应该能感触到每个我的项目是如何从其容器的开始抓取的。

演示地址:https://codepen.io/shadeed/pe…

然而,如果该值是proximity,则浏览器将实现这项工作,它可能会吸附到定义的点(在咱们的例子中start)。留神,proximity 是默认值,然而为了清晰起见,咱们这里还是申明一下它。

.section {
  display: flex;
  overflow-x: auto;
  /* proximity is the default value, I added it for clarity reasons */
  scroll-snap-type: x proximity;
}

Scroll Snapping Alignment

滚动容器的子项目须要一个对齐点,它们能够对齐到这个点。咱们能够用 start, centerend

为了更容易了解,上面是它的工作原理。

假如咱们在滚动容器上有一块磁铁,这将有助于咱们管制捕获点。如果 scroll-snap-type 是垂直的,则对齐对齐将是垂直的。参见下图:

滚动容器的 start

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

滚动容器的 center

子项目将吸附到其滚动容器的核心。

滚动容器的 end

子项将对齐到其滚动容器的开端。

应用 Scroll-Snap-Stop

有时,咱们可能须要一种办法来避免用户在滚动时意外跳过一些重要的项。如果用户滚动太快,就有可能跳过某些项。

.section__item {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

法动太快可能会跳过三个或四个我的项目,如下所示:

scroll-snap-stop的默认值是normal, 要强制滚动捕捉到每个可能的点,应应用always

.section__item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

这样,用户能够一次滚动到一个捕获点,这种形式有助于防止跳过重要内容。设想每个进行点都有一个进行标记,参见上面的动画:

演示地址:https://codepen.io/shadeed/pe…

Scroll Snap Padding

scroll-padding设置所有侧面的滚动边距,相似于 padding 属性的工作形式。在下图中,滚动容器的左侧有 50px 的内边距。后果,子元素将从左侧边缘捕捉到50px

直滚动也是如此。参见上面的示例:

.section {
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-padding: 50px 0 0 0;
}

Scroll Snap Margin

scroll-margin设置滚动容器的子项之间的间距。在向元素增加边距时,滚动将依据边距对齐。参见下图:

.item-2具备scroll-margin-left: 20px。后果,滚动容器将在该我的项目之前对齐到20px。请留神,当用户再次向右滚动时,.item- 3 会捕捉到滚动容器的结尾,这意味着仅具备边距的元素将受到影响。

CSS Scroll Snap 用例

图片列表

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

.images-list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x;
  gap: 1rem;
  -webkit-overflow-scrolling: touch; /* Important for iOS devices */
}

.images-list img {scroll-snap-align: start;}

留神,我应用 x 作为 scroll-snap-type 的值。

事例地址:https://codepen.io/shadeed/pe…

好友清单

滚动捕获的另一个很好的用例是敌人列表。上面的示例摘自 Facebook(一个实在的示例)。

.list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  scroll-padding: 48px;
  padding-bottom: 32px;
  -webkit-overflow-scrolling: touch;
}

.list-item {scroll-snap-align: start;}

请留神,滚动容器的 padding-bottom:32px。这样做的目标是提供额定的空间,以便box-shadow 能够按预期显示。

头像列表

对于此用例,我感兴趣的是将 center 作为 scroll-snap-align 的值。

.list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.list-item {scroll-snap-align: center;}

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

演示地址:https://codepen.io/shadeed/pe…

全屏展现

应用 scroll snap 也能够用于垂直滚动,全屏展现就是一个很好的例子。

<main>
  <section class="section section-1"></section>
  <section class="section section-2"></section>
  <section class="section section-3"></section>
  <section class="section section-4"></section>
  <section class="section section-5"></section>
</main>
main {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

.section {
  height: 100vh;
  scroll-snap-align: start;
}

块和内联

值得一提的是,对于 scroll-snap-type,能够应用 inlineblock逻辑值。参见上面的示例

main {scroll-snap-type: inline mandatory;}

可读性

应用 CSS scroll snap 时,请确保可拜访性。这是滚动对齐的一种不好用法,它阻止用户自在滚动内容以读取内容。

.wrapper {scroll-snap-type: y mandatory;}

h2 {scroll-snap-align: start;}

请务必不要这样做。

总结

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

我是小智,咱们下期在见!


代码部署后可能存在的 BUG 没法实时晓得,预先为了解决这些 BUG,花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

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

交换

有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588… 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版