译-使用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;}/* ...你懂得 */
然后实现效果如下:
案例演示3
了解更多
这篇文章浅显地向大家介绍了一些语法知识,如果你有兴趣了解更多的用例和查看更多示例,下面有几篇不错的文章。
Practical CSS Scroll Snapping
实战CSS Scroll Snapping(整理自Practical CSS Scroll Snapping)
Well-Controlled Scrolling with CSS Scroll Snap
译-使用Scroll Snapping实现CSS控制页面滚动相关推荐
- 【vue】用WOW.js+animate.css实现页面滚动加载元素动画
一.场景 在很多的网站中,我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的,这样看起来页面更具有活力,增加用户体验.当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的 ...
- JS+CSS实现页面滚动切换图片(从边角扩散)的效果
先上效果图: 实现思路: 两个绝对定位的div重合,通过监听页面滚动位置信息,动态的改变上面的div宽高.背景定位.边角半径 div样式设计: .bgTrans {height: 400px;posi ...
- js控制页面滚动到指定位置,js中scrollIntoView()的用法
js中scrillIntoView()的用法--页面滚动到指定位置 最近遇到一个问题,在一个页面上,点击某个按钮时,滚动到页面的某一位置. 如图: 如果是我写的话,我可能会先获取滚动到的元素,然后获取 ...
- js页面滚动,设置锚点,控制页面滚动到某个节点位置
1.获取某Dom元素距离可视窗口顶部的距离 元素在网页里的坐标-页面滚动的距离 获取元素距离可视窗口顶部的距离 = dom.ofisetTop - window.pageYOffset; 元素自身的高 ...
- html介绍和CSS控制页面
请结合前面的总述观看,后续内容持续开发. 注意:HTML 编码格式和解码格式要一致. 标签分类:块级元素和行内元素. 行内元素:对应标签内容仅在一行中 <span> &l ...
- css控制页面打印(分页、屏蔽不需要打印的对象)
样式: <style media="print"> .Noprint { DISPLAY: none;} .PageNext { ...
- css控制页面文字不能被选中user-select:none;
现象:html中可能有些地方不想让用户复制文字,或是用a标签做了个点击按钮,点快的时候文字会被选中,很丑,这个时候可以使用下面的方案禁止文字选中. 原因:鼠标点快了文字会被选中. 解决方案:不同的浏览 ...
- 页面文字请使用css进行控制,css控制页面文字不能被选中user-select:none;
CentOS 7 配置静态IP 1.查看MAC地址 2.修改/etc/sysconfig/network-scripts/ifcfg-[第一步中红框内的文字] 3.添加和修改内容如下: 4.修改/et ...
- 使用wow.js和animate.css实现页面滚动动画效果
wow.js是一款结合了Animate.css,可以在页面向下滚动时,为页面中的元素加载动画的js. 项目地址:GitHub - graingert/WOW: Reveal CSS animation ...
最新文章
- log4j个人使用整理
- 详解 Vue Vuex 实践
- 用python画皮卡丘画法-python turtle绘图库绘制【皮卡丘】源码
- linux设备驱动模型 - device/bus/driver
- 服务器意外重启导致storm报错的问题处理
- c 字符串转数字_C语言实现十进制转216进制、十六进制转十进制
- Leansoft再发招贤令:面试官徐磊有话讲 | IDCF
- 美国在理论计算机科学的研究重视,清华麻省理工香港中文联建理论计算机科学研究中心...
- python的matplotlib生成colorbar
- 用mescroll实现无限上拉增加数据,下拉刷新数据 (学习笔记)
- Codeforces Round #879 (Div. 2) C. Short Program
- 知云文献翻译打不开_推荐一个很好用的阅读英文文献工具(研究僧看过来啦!!!)...
- Atitit 提升可读性的艺术 目录 1. 几大原则	2 1.1. 直接原则,无脑原则。。。	2 2. 本地化命名法	2 2.1. 可以使用管理命名法 多个api 比如old api,new ap
- java基础(七)--- set
- chrome 安装 gliffy插件以及使用
- 明日之后 服务器维护,明日之后服务器爆满炸服 排队等待进不去什么梗
- 微信小程序:小程序开发中申请优惠券步骤
- 这些坑别踩!游戏随机地图生成开发经验分享
- golang windows 设置桌面背景和屏幕保护
- nvm use 报错:You do not have sufficient privilege to perform this operation