学习CSS Scroll Snapping与scroll-snap-align
假如有个Web页面是一块一块的,如下图所示:
我们希望可以一块一块的滚动,比如当前一个块滚出去了一部分并且后一个块滚进来一部分的时候,实现后一个块自动滚入或者前一个块回弹到初始位置这种效果,以前的时候用js需要写比较复杂的判断逻辑,后来有了一个css scroll snap这个方法,可以比较方便的实现想要的效果了,基本够用。
基本页面
css代码:
ul {max-height: 100vh;overflow-y: scroll;padding: 0;}li {font-size: 6vw;height: 30vh;display: flex;justify-content: center;align-items: center;}li:nth-child(1) {background-color: rgb(255, 0, 0);}li:nth-child(2) {background-color: rgb(255, 128, 0);}li:nth-child(3) {background-color: rgb(255, 255, 0);}li:nth-child(4) {background-color: rgb(0, 255, 0);}li:nth-child(5) {background-color: rgb(0, 255, 255);}li:nth-child(6) {background-color: rgb(0, 0, 255);}li:nth-child(7) {background-color: rgb(128, 0, 255);}
html代码:
<ul><li>赵</li><li>钱</li><li>孙</li><li>李</li><li>周</li><li>吴</li><li>郑</li></ul>
ul里面七个li, 背景色是赤橙黄绿青蓝紫,文字分别是赵钱孙李周吴郑。
现在的页面就是非常普通的页面,只是普通平常的滚动,还没加效果。
新属性scroll-snap-type与scroll-snap-align
1、scroll-snap-type
The scroll-snap-type property specifies whether a scroll container is a scroll snap container, how strictly it snaps, and which axes are considered. If no strictness value is specified, proximity is assumed.
none | [ x | y | block | inline | both ] [ mandatory | proximity ]
scroll-snap-type指明了一个可以滚动的容器是否是scroll snap container , snap地是否严格() , 在哪个轴上实现snap效果。
2、scroll-snap-align
官方文档解释的好复杂,我也看不懂。
[ none | start | end | center ]
效果一
一个块被滚了一部分中途松手之后,页面自动滚回去或着自动滚到下一个块。,如下图所示:
这个应该算是css scroll snapping的最基本的用法了,
ul的样式中添加:
scroll-snap-type: y mandatory;
li中添加样式:
scroll-snap-align: start;
scroll-snap-type的属性值mandatory,使得当ul没有滚动的时候,会自动继续滚动到某个合适的li然后才停下来,
scroll-snap-align的属性值设置成了start, 看到的效果是:滚动的时候,‘赵’和‘李’都是部分出现在可视区域,但是松手后最后停留在了 “赵”,不过也可以设置成停留在下面的‘李’,就是效果二
效果二
和效果一相比的话,就是li的一个属性的变化而已。
scroll-snap-align: end;
效果如下:
效果三
效果一和效果二都是一个是让滚动到可视区的第一个对齐留在可视区,另外一个是让滚动到可视区的最后一个对齐留在可视区,也可以实现让“孙”对齐,不管“赵”和‘李’会被滚出去多少。
li的样式修改为:
scroll-snap-align: center;
这时可视区一共有5个li, ’孙‘是中间的那个。
效果如下图所示:
有空接着写。。。
参考文献:
https://www.w3.org/TR/css-scroll-snap-1/
https://css-tricks.com/practical-css-scroll-snapping/
学习CSS Scroll Snapping与scroll-snap-align相关推荐
- 译-使用Scroll Snapping实现CSS控制页面滚动
特别声明,本文翻译自@alligatorio的Control Page Scroll in CSS Using Scroll Snapping一文,受限于译者能力,译文或存在不足,欢迎大家指出.如需转 ...
- Css实现自动隐藏scroll滚动条但不影响滚动功能
Css实现自动隐藏scroll滚动条但不影响滚动功能 谷歌内核webkit .container::-webkit-scrollbar {display: none; //Safari and Chr ...
- 《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...
- Web技术基础学②——初步学习CSS
初步学习CSS 目录 初步学习CSS 前言 ✍CSS如何使用? ✍CSS相关样式 ✎颜色.尺寸及对齐 ✎盒子模型 ✎边框与边距 ✎定位 ✎定位 ✎浮动 ✎不透明度 ✎组合选择器 ✎伪类和伪元素 ✍CS ...
- WEB前端学习:CSS学习_用户界面样式
用户界面样式 文章目录 用户界面样式 一.鼠标样式 二.轮廓 三.防止文本域拖拽 四.去除图片底侧空白间隙 五.溢出文字隐藏 1. work-break 2. white-space 3. text- ...
- css语言中选项是背景图像的属性,HTML_学习CSS的背景图像属性background,CSS的背景属性“background”提供 - phpStudy...
学习CSS的背景图像属性background CSS的背景属性"background"提供了众多属性值,如颜色.图像.定位等,为网页背景图像的定义提供了极大的便利.看看backgr ...
- 3-Javaweb学习-CSS层叠样式表
3-Javaweb学习-CSS层叠样式表 1.CSS(Cascading Style Sheet):层叠样式表 (1)作用: ①美化界面 ②在一定制度上解决了浏览器兼容性的问题 (2)选择器 ...
- css flexbox模型_5分钟内学习CSS Flexbox-初学者教程
css flexbox模型 快速介绍流行的布局模块 (A quick introduction to the popular layout module) In this post, you'll l ...
- 学习CSS的背景图像属性background
CSS的背景属性"background"提供了众多属性值,如颜色.图像.定位等,为网页背景图像的定义提供了极大的便利.看看background提供的属性值: background ...
最新文章
- ubuntu 14.10安装zabbix(lnmp环境)
- 简述BT下载技术及其公司发展现状
- python飞机大战的实训心得体会-python之基础总结(飞机大战)
- snmp linux arm,Net-SNMP的交叉编译 for ARM64
- 数据库原理与应用(SQL Server)笔记 第二章 简单数据查询
- 基于hi-nginx的web开发(python篇)——cookie和会话管理
- RichTextBox 改变每行的字体颜色
- php private方法,php如何调用private方法
- [html] 举例说明Shadow DOM的应用场景有哪些?
- 2019matlab中的floyd,基于matlab的floyd算法详解
- python webdriver 从无到有搭建混合驱动自动化测试框架的过程和总结
- Android使用google breakpad之minidump_stackwalk
- 74CMS 3.0 CSRF漏洞
- Java枚举(enum)
- 不卷了!技术团队成员集体辞职
- Python实现BP神经网络ANN单隐层分类模型项目实战
- 内存申请 GFP_KERNEL GFP_ATOMIC
- unknown custom element: <router-link> - did you register the component correctly? For recursiv
- 青岛企业邮箱怎么注册
- 如何使用SWFTools 命令 将pdf文件转换为swf文件,并进行在线浏览该pdf文件