Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >使用 CSS Scroll Snap 优化滚动,提升用户体验!

使用 CSS Scroll Snap 优化滚动,提升用户体验!

作者头像
前端小智@大迁世界
发布于 2022-06-15 06:55:59
发布于 2022-06-15 06:55:59
3.2K03
代码可运行
举报
文章被收录于专栏:终身学习者终身学习者
运行总次数:3
代码可运行

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

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

你是否经常希望有一个CSS特性可以轻松创建一个可滚动的容器? CSS scroll snap 可以做到这一点。在早期的前端开发中,我依靠 JS 插件来创建滑块组件。有时,我们需要一种简单的方法来快速将元素制作成可滚动的容器。现在,多亏了 CSSS scroll snap ,我们可以简单做到这一点。

为什么要使用 CSS Scroll Snap

随着移动设备和平板设备的兴起,我们需要设计和构建可以轻触的组件。 以图库组件为例。 用户可以轻松地向左或向右滑动以查看更多图像,而不是分层结构。

根据CSS规范,为开发者提供良好控制的滚动体验是引入 CSS scroll snap的主要原因之一。它增强了用户体验,并使其更容易实现滚动体验。

滚动容器的基础知识

要创建一个滚动容器,以下是我们需要做的基本内容

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

举个例子:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.section {
  white-space: nowrap;
  overflow-x: auto;
}

多年来,使用white-space: nowrap是一种流行的CSS解决方案,用于强制元素保持内联。不过,现在我们基本都使用 Flexbox :

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.section {
  display: flex;
  overflow-x: auto;
}

这是创建滚动容器的基本方法。然而,这还不够,这不是一个可用的滚动容器。

滚动容器有什么问题

问题是,与滑动相比,它们并不能提供良好的体验。在触摸屏上滑动手势的主要好处是,我们可以用一根手指水平或垂直滚动。

实际上需要将每个项目移动到它自己的位置。这并不是滑动,这是一种非常糟糕的体验,通过使用CSS scroll snap,我们可以通过简单地定义snap points来解决这个问题,它将使用户更容易地水平或垂直滚动。

接着,我们来看看如何使用CSS scroll snap

CSS Scroll Snap 简介

要在容器上使用scroll snap,它的子项目应该内联显示,这可以用我上面解释的方法之一来实现。我选择CSS flexbox:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.section {
  display: flex;
  overflow-x: auto;
}

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.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表示垂直滚动。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/* 水平*/
.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值。这意味着,滚动必须对齐到滚动容器的开始处。

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.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 是默认值,但是为了清晰起见,我们这里还是声明一下它。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.section {
  display: flex;
  overflow-x: auto;
  /* proximity is the default value, I added it for clarity reasons */
  scroll-snap-type: x proximity;
}

这里顺便给大家推荐一个亲测好用的云数据库MemFire Cloud,做个小应用,他的免费额度就绰绰有余。

Scroll Snapping Alignment

滚动容器的子项目需要一个对齐点,它们可以对齐到这个点。我们可以用start, centerend

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

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

滚动容器的 start

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

滚动容器的 center

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

滚动容器的 end

子项将对齐到其滚动容器的末尾。

使用 Scroll-Snap-Stop

有时,我们可能需要一种方法来防止用户在滚动时意外跳过一些重要的项。如果用户滚动太快,就有可能跳过某些项。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.section__item {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.section__item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

这样,用户可以一次滚动到一个捕捉点,这种方式有助于避免跳过重要内容。 想象每个停止点都有一个停止标志,参见下面的动画:

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

Scroll Snap Padding

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.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 提供更好的滚动体验。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.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(一个真实的示例)。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.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的值。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.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也可以用于垂直滚动,全屏展示就是一个很好的例子。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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逻辑值。参见下面的示例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
main {
  scroll-snap-type: inline mandatory;
}
可读性

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.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... 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-06-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
使用 sroll-snap-type 优化滚动
根据 CSS Scroll Snap Module Level 1 规范,CSS 新增了一批能够控制滚动的属性,让滚动能够在仅仅通过 CSS 的控制下,得到许多原本需要 JS 脚本介入才能实现的美好交互。
Sb_Coco
2019/12/10
1.5K0
超级实用!,掌握这9个鲜为人知的CSS属性
虽然许多开发人员熟悉常用的CSS属性,但也有一些较为陌生的属性可能被忽视了。在本文中,我们将探讨10个你可能没有使用过的CSS属性。
前端小智@大迁世界
2023/08/16
8860
基于vue3实现的vue3-seamless-scroll无缝滚动
项目地址 GitHub Gitee 安装vue3-seamless-scroll npm install vue-seamless-scroll --save   参数配置文档地址 GitHub与Gitee 注册组件 全局注册 import { createApp } from 'vue'; import App from './App.vue'; import { jsSeamlessScroll, cssSeamlessScroll } from "vue3-seamless-scro
用户6682160
2021/07/01
4.5K0
冷门又好用的 CSS 特性
CSS 提供了对多列布局的支持。支持设置布局中的列数 (column-count)、内容应如何列之间的流动规则、列之间的间距 (column-gap) 以及列分割线(column-rule)的样式。
MudOnTire
2022/03/22
1.6K0
冷门又好用的 CSS 特性
分享100 个鲜为人知的 CSS 技巧
金三银四找工作的旺季来了,在过去的一段时间里,我花了很多时间将之前的一些基础知识做了整理,希望这些内容能够帮助你在面试的时候,稍微顺利一些。因此,我将整理好的这 100 个 CSS 知识技巧分享给你,希望你会觉得太对你有用。
前端达人
2024/03/11
8820
分享100 个鲜为人知的 CSS 技巧
能用CSS实现的就不用麻烦JavaScript
凡是可以用 JavaScript 来写的应用,最终都会用 JavaScript 来写。——Atwood定律
lizhenwen
2021/07/18
1.5K0
【CSS】1468- 4 个即将推出的 CSS 新功能
英文 | https://engineering.udacity.com/the-4-upcoming-css-features-im-most-excited-for-24b66293edfa
pingan8787
2022/11/15
5850
【CSS】1468- 4 个即将推出的 CSS 新功能
vue2.0和better-scroll实现左右联动效果
在做移动端商城或者其他页面的时候,经常会遇到左右联动的效果,今天小编vue2.0和better-scroll这个插件一起实现左右联动效果。
小周sir
2019/09/23
1.4K0
vue2.0和better-scroll实现左右联动效果
[第25期] 你不知道的 CSS - by Chrome 2019
最近看了 Chrome Dev Summit 2019 大会视频, 了解到了很多之前不知道的 CSS 新特性,挺有意思的。
皮小蛋
2020/03/02
7870
你也许不知道的浏览器的一些"滚动"行为
最近挺忙的,这次抽空写写文陶冶下情操,浏览器滚动真的天天见日日见啦,比如你现在看的这篇文章,往下看就必须得滚动,这篇文章主要聊聊滚动相关的一些方法跟属性,还有一些有趣的例子? 文章涉及到的方法或属性在
桃翁
2019/09/17
3.4K0
你也许不知道的浏览器的一些"滚动"行为
2023 年了解即将推出的 CSS 功能
CSS 锚点定位是一项强大的新功能,可用于创建各种交互元素,例如工具提示、模式和弹出窗口。它使工具提示更加动态。这是一个小示例,展示了如何锚定定位以创建工具提示:
linwu
2023/08/17
6350
2023 年了解即将推出的 CSS 功能
前沿动态 | 带你提前体验CSS未来的新特性
本篇文章,Rachel Andrew将会带着大家了解下浏览器在CSS方面的未来动向, 例如Flexbox行和列布局支持gap间隙属性的标准。
前端达人
2019/01/12
1.8K0
前沿动态 | 带你提前体验CSS未来的新特性
左右点击切换tab标签的实现
演示: 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .tab-cont
岳泽以
2023/04/27
3.5K0
左右点击切换tab标签的实现
CSS新规范:样式查询
最近,Chrome团队发布了对一个新的CSS规范的实验性支持,即样式查询。简而言之,它让我们查询容器的样式,而不是只查询尺寸。在查询容器尺寸不够的情况下,这可能很有帮助。
前端小智@大迁世界
2023/01/06
1K0
CSS新规范:样式查询
scroll-behavior & scrollIntoView 的使用,以及解决ios手机不兼容的问题
在平时的日常开发中,我们可能会遇到这样的需求,点击一个导航链接,页面会定位到一个元素或上去。如下图vue官网所示,我点击左侧导航栏链接,右边会定位到相应的位置。
玖柒的小窝
2021/11/03
3.7K0
scroll-behavior & scrollIntoView 的使用,以及解决ios手机不兼容的问题
CSS 中 关于 Overflow ,你需要了解的这些知识点!
在CSS中,当一个元素的内容太大而无法容纳时,我们可以对其进行控制。该元素的属性是overflow,它是overflow-x和overflow-y属性的简写形式。
前端小智@大迁世界
2020/05/29
6.9K0
CSS 中 关于 Overflow ,你需要了解的这些知识点!
记录一些小技巧-CSS篇
选中不在此范围内的元素,例如:div:not(:last-child),选中除最后一个div的所有div元素
WahFung
2020/08/24
9710
记录一些小技巧-CSS篇
前端优秀实践不完全指南
一个 Web 页面,一个 APP,想让别人用的爽,也就是所谓的良好的用户体验,我觉得他可能包括但不限于:
桃翁
2021/03/18
9630
Web 用户体验设计提升实践
一个 Web 页面或是一个 App,想让别人用得爽,获得良好的用户体验,可能需要包括但不限于:
Shopee技术团队
2021/11/16
1.4K0
Web 用户体验设计提升实践
适合收藏,一些CSS优化技巧!
当各种框架以及复杂的 JS 知识开始充斥着我们的工作环境时。谁还能够记得,以 CSS 来构建更加良好的用户体验,也是前端的一个重要组成部分。 所以说,今天咱们就来看看 css 的优化方案-终极合集。一共一百条,有点多,适合收藏
老K博客
2024/03/10
6600
相关推荐
使用 sroll-snap-type 优化滚动
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验