CSS 滚动捕获 Scroll Snap

CSS 滚动捕获 Scroll Snap

CSS 滚动捕获允许开发者通过声明一些位置(或叫作捕获位置)来创建精准控制的滚动体验. 通常来说轮播图就是这种体验的例子, 在轮播图中, 用户只能停在图 A 或者图 B, 而不能停在 AB 的中间.

比如平时用淘宝或小红书, 当你上滑到下一个推荐内容时, 页面不会停留在两个推荐内容之间. 有限的手机屏幕尺寸对于这种一项一项展示的内容来说, 需要精准的滑动提供良好的体验. 当然默认情况下, 是滚动到哪里就显示什么内容, 不会存在所谓的「吸附」行为

CSS 属性概览

下面两个属性是定义在滚动容器上的

  • scroll-snap-type: 定义滚动容器是否可以捕获、捕获是必须的还是可选的、捕获应该发生在横向滚动还是纵向滚动上.
  • scroll-padding: 定义滚动容器的捕获偏移.

下面三个属性是定义在滚动容器中的元素上的

  • scroll-snap-align: 滚动容器的子元素和滚动容器对齐方式, 顶部对齐、中间对齐还是底部对齐
  • scroll-margin: 滚动容器的子元素的滚动 margin.
  • scroll-snap-stop: 是否允许滑动超过应该捕获的位置. 比如当前屏幕是 A, 在手机屏幕上滑动很长的距离, 是否可以快速划过很多元素(B/C/D/E…)还是一定会停在下一个 B.

一些个专有名词

有兴趣的可以来读 CSS 规范. 专有名词都是这里面定义的

学习 CSS 就是要闹明白这个词啥意思, 那个词啥意思. CSS 属性越来越多, 专有名词也得跟上不是嘛😮‍💨

下面三个名词是针对滚动容器

  • scroll container(滚动容器): 很容易理解, 可以滚动的盒子就是滚动容器.
  • scroll snap container(滚动捕获容器): 滚动容器不一定是滚动捕获容器, 除非其 scroll-snap-type 不是 none
  • snapport(捕获窗口): 滚动容器减去其 scroll-padding 后的区域.

下面的名词针对滚动容器的子元素

  • scroll snap area(滚动捕获位置): 既然是针对子元素的, 你可能想当然以为就是子元素的 border box, 其实不是, 而是 border box 加上 scroll-margin 指定的区域.
  • snap position(捕获位置): 不要被位置这两个字欺骗了, 所谓的位置其实是元素的 scroll snap area 和滚动容器的 snapport 的对齐方式(alignment).

兼容性

滚动捕获所涉及到的所有属性, 在 Chrome 75 都得到了完整支持, 当然其他浏览器也支持, 不过可能在更新的版本.
在这里插入图片描述

谢谢你看到这里😊

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/133439.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

wpf Grid布局详解 `Auto` 和 `*` 是两种常见的设置方式 行或列占多个单元格,有点像excel里的合并单元格。使其余的列平均分配剩余的空间

比如只有行的界面 <Window x:Class"GenerateTokenApp.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/exp…

YOLO目标检测——红绿灯检测数据集【含对应voc、coco和yolo三种格式标签】

实际项目应用&#xff1a;红绿灯检测数据集在自动驾驶、交通安全监控、智能交通系统、交通流量监测和驾驶员辅助系统等领域都有广泛应用的潜力数据集说明&#xff1a;红绿灯检测数据集&#xff0c;真实场景的高质量图片数据&#xff0c;数据场景丰富&#xff0c;含有国内红绿灯…

Zeus IoT : 基于 SpringBoot 的分布式开源物联网大数据平台

Zeus IoT 是一个集设备数据采集、存储、分析、观测为一体的开源物联网平台&#xff0c;全球首创基于 Zabbix 的物联网分布式数据采集架构&#xff0c;具备超百万级物联网设备的并发监控能力&#xff0c;真正具备工业级性能与稳定性的开源物联网大数据中台。 Zeus IoT 致力于让设…

快速实现一个企业级域名 SSL 证书有效期监控巡检系统

Why 现在对于企业来说&#xff0c;HTTPS 已经不是可选项&#xff0c;已经成为一个必选项。HTTPS 协议采用 SSL 协议&#xff0c;采用公开密钥的技术&#xff0c;提供了一套 TCP/IP 传输层数据加密的机制。SSL 证书是一种遵守 SSL 协议的服务器数字证书&#xff0c;一般是由权威…

Rust编程基础核心之所有权(下)

1.变量与数据交互方式之二: 克隆 在上一节中, 我们讨论了变量与数据交互的第一种方式: 移动, 本节将介绍第二种方式:克隆。 如果我们 确实 需要深度复制 String 中堆上的数据&#xff0c;而不仅仅是栈上的数据&#xff0c;可以使用一个叫做 clone 的通用函数。 看下面的代码…

Mac苹果电脑分辨率修改管理 安装SwitchResX 完美解决

SwitchResX for Mac是一款Mac应用程序&#xff0c;可帮助您更好地管理和控制显示器分辨率和其他显示设置。使用SwitchResX&#xff0c;您可以创建自定义分辨率、旋转屏幕、调整显示器色彩配置等。 1. 自定义分辨率&#xff1a;SwitchResX允许用户创建自定义的屏幕分辨率&#…

程序设计:C++ 多进程、多线程原理和一个多进程、多线程框架

并发编程和异步编程是程序员的基本技能&#xff0c;各种高级语言也开发出了一些高级但晦涩的机制&#xff08;比如C#的await/async&#xff09;。并发编程主要是指多进程、多线程和交替执行&#xff0c;异步编程则是指多个并发执行任务之间的交互。 目录 并发和异步的技术介绍…

VSCode设置中文语言界面(VScode设置其他语言界面)

一、下载中文插件 二、修改配置 1、使用快捷键 CtrlShiftP 显示出搜索框 2、然后输入 configure display language 3、点击 (中文简体) 需要修改的语言配置 三、重启 四、可能出现的问题 1、如果configure display language已经是中文配置&#xff0c;界面仍是英文 解决&a…

VinsFusion排坑指南

Ubuntu18.04Cere 下载1.14.0版本。Ceres安装方法参考vinsfusion的docker fileOpenCV相关报错 参考 https://wenda.ncnynl.com/article/5CV_LOAD_IMAGE_GRAYSCALE 改成 cv::IMREAD_GRAYSCALE 在三个CMakeLists文件中指定opencv的版本&#xff1a; find_package(OpenCV 3.2.0 REQ…

C++成长之路

看好的发展方向&#xff1a; 证券行业软件开发、AI自动化开发、桌面端工具类开发&#xff0c;云桌面技术 产品框架搭建 MFCDuilbLibcef Qt 技术深入 熟知编译器原理 C11/14等新知识的学习 泛型编程 / 模板编程 设计模式 多线程并发 多进程通讯 各种锁及其优缺点 必看书…

css进阶知识点速览

0前言 零基础部分的博客 1选择器进阶 1.1后代选择器 作用&#xff1a;根据html标签的嵌套关系&#xff0c;选择父元素后代中满足条件的元素 选择器语法&#xff1a;选择器1 选择器2 {css} 结果&#xff1a; 在选择器1所找到标签的后代中 注意&#xff1a; 后代包括&#xf…

python 视频硬字幕去除 内嵌字幕去除工具 vsr

项目简介 开源地址&#xff1a;https://github.com/YaoFANGUK/video-subtitle-remover Video-subtitle-remover (VSR) 是一款基于AI技术&#xff0c;将视频中的硬字幕去除的软件。 主要实现了以下功能&#xff1a; 无损分辨率将视频中的硬字幕去除&#xff0c;生成去除字幕后…

java高级之单元测试、反射

1、Junit测试工具 Test定义测试方法 1.被BeforeClass标记的方法,执行在所有方法之前 2.被AfterCalss标记的方法&#xff0c;执行在所有方法之后 3.被Before标记的方法&#xff0c;执行在每一个Test方法之前 4.被After标记的方法&#xff0c;执行在每一个Test方法之后 public …

Xcode15 framework ‘CoreAudioTypes‘ not found

Xcode15遇见"framework ‘CoreAudioTypes’ not found。" 可尝试移除CoreAudioTypes&#xff0c;添加CoreAudio。 CoreAudio是CoreAudioTypes的套壳。 CoreAudio/CoreAudioTypes.h头文件内容 /*CoreAudio/CoreAudioTypes.h has moved to CoreAudioTypes/CoreAudi…

MFC发送http https以及json解析

域名解析成IP char szWeb[128] "www.baidu.com";struct hostent *pHost NULL;pHost gethostbyname(szWeb);//完成主机名到域名的解析char *IP inet_ntoa(*((struct in_addr *)pHost->h_addr));CString ipStr IP;请求三部曲&#xff1a; 1、CInternetSession…

Java学习路线指南

有很多想自学Java或者转行Java的会有很多疑问&#xff0c;笔者在此进行总结。 有很多想自学Java或者转行Java的会有很多疑问&#xff0c;笔者在此进行总结。 Java岗位多&#xff0c;容易找到工作。Java工资天花板高&#xff0c;比如&#xff1a;Java架构师、Java技术总监。Java…

线上JAVA应用平稳运行一段时间后出现JVM崩溃问题 | 京东云技术团队

一、问题是怎么发现的 系统是一个定时任务系统&#xff0c;需要定时执行业务代码&#xff0c;业务代码主要是访问MYSQL数据库和缓存进行操作&#xff0c;该开始启动&#xff0c;系统日志一切正常&#xff0c;但是运行一段时间到凌晨后&#xff0c;系统就自动崩溃了&#xff0c…

取消elementUI中table的选中状态和勾选状态赋值

一、取消所有选中 1、表格上绑定ref 2、清空用户选中数据 this.$refs.loopRef.clearSelection()二、勾选状态赋值 获取数据&#xff0c;flag为true则是选中状态&#xff0c;并将前面勾选框设为选中状态 this.listData.forEach(item> {if(row.flag1){this.$refs.loopRef.to…

JavaEE平台技术——预备知识(Maven、Docker)

JavaEE平台技术——预备知识&#xff08;Maven、Docker&#xff09; 1. Maven2. Docker 在观看这个之前&#xff0c;大家请查阅前序内容。 &#x1f600;JavaEE的渊源 &#x1f600;&#x1f600;JavaEE平台技术——预备知识&#xff08;Web、Sevlet、Tomcat&#xff09; 1. M…

【漏洞复现】typecho_v1.0-14.10.10_unserialize

感谢互联网提供分享知识与智慧&#xff0c;在法治的社会里&#xff0c;请遵守有关法律法规 文章目录 漏洞利用GetShell 下载链接&#xff1a;https://pan.baidu.com/s/1z0w7ret-uXHMuOZpGYDVlw 提取码&#xff1a;lt7a 首页 漏洞点&#xff1a;/install.php?finish 漏洞利用 …