当前位置: 首页 > news >正文

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 都得到了完整支持, 当然其他浏览器也支持, 不过可能在更新的版本.
在这里插入图片描述

谢谢你看到这里😊

相关文章:

CSS 滚动捕获 Scroll Snap

CSS 滚动捕获 Scroll Snap CSS 滚动捕获允许开发者通过声明一些位置(或叫作捕获位置)来创建精准控制的滚动体验. 通常来说轮播图就是这种体验的例子, 在轮播图中, 用户只能停在图 A 或者图 B, 而不能停在 A 和 B 的中间. 比如平时用淘宝或小红书, 当你上滑到下一个推荐内容时…...

【带头学C++】----- 三、指针章 ---- 3.9 数组作为函数的参数

当数组作为函数参数时,有几种常见的方式可以传递数组给函数: 数组作为指针传递: 数组名在函数调用时会自动转换为指向数组第一个元素的指针。通过指针可以访问数组元素,但无法获取数组的大小。在函数中修改指针指向的值会影响原始…...

完美处理 Android App 的 apk 输出路径与文件名

实现代码 buildTypes {// ...applicationVariants.all {variant ->variant.outputs.all {Calendar calendar Calendar.getInstance(Locale.CHINA);def buildDate String.format(Locale.CHINA, "%04d%02d%02d", calendar.get(Calendar.YEAR), calendar.get(Cale…...

【技术干货】开源库 Com.Gitusme.Net.Extensiones.Core 的使用

目录 1、项目介绍 2、为项目添加依赖 3、代码中导入命名空间 4、代码中使用 示例 1:string转换 示例 2:object转换 1、项目介绍 Com.Gitusme.Net.Extensiones.Core是一个.Net扩展库。当前最新版本1.0.4,提供了常见类型转换&#xff0c…...

大厂面试题-b树和b+树的理解

为了更清晰的解答这个问题,从三个方面来回答: a.了解二叉树、AVL树、B树的概念 b.B树和B树的应用场景 1.B树是一种多路平衡查找树,为了更形象的理解,我们来看这张图。 二叉树,每个节点支持两个分支的树结构&#xff…...

NeRF-SLAM部署运行(3060Ti)

记录在部署运行期间遇到的一些问题,分享给大家~ 一、环境 RTX 3060 Ti、8G显存、Ubuntu18.04 二、部署 1. 下载代码 git clone https://github.com/jrpowers/NeRF-SLAM.git --recurse-submodules git submodule update --init --recursive cd thirdparty/insta…...

零基础编程入门教程软件推荐,零基础编程自学

零基础编程入门教程软件推荐,零基础编程自学 给大家分享一款中文编程工具,零基础轻松学编程,不需英语基础,编程工具可下载。 这款工具不但可以连接部分硬件,而且可以开发大型的软件,象如图这个实例就是用…...

Amazon EC2 安全可调用的云虚拟主机服务器

💗wei_shuo的个人主页 💫wei_shuo的学习社区 🌐Hello World ! Amazon EC2 打造全新的科技链 Amazon Elastic Compute Cloud(Amazon EC2)提供最广泛、最深入的计算平台,拥有超过 500 个实例&…...

HTTP/HTTPS、SSL/TLS、WS/WSS 都是什么?

有同学问我,HTTP/HTTPS、SSL/TLS、WS/WSS 这都是些什么?那我们就先从概念说起: HTTP 是超文本传输协议,信息是通过明文传输。HTTPS 是在 HTTP 的基础上信息通过加密后再传输。SSL 是实现 HTTPS 信息传输加密的算法。TLS 是 SSL 的…...

软考之系统安全理论基础+例题

系统安全 系统安全性分析与设计 作为全方位的、整体的系统安全防范体系也是分层次的,不同层次反映了不同的安全问题,根据网络的应用现状情况和结构,可以将安全防范体系的层次划分为 物理层安全系统层安全网络层安全应用层安全安全管理。 …...

棱镜七彩亮相工控中国大会,以软件供应链安全助力新型工业化高质量发展

2023年11月1日-3日,2023第三届工控中国大会在苏州国际会议中心举办,本届大会由中国电子信息产业发展研究院、中国工业经济联合会、国家智能制造专家委员会、国家产业基础专家委员会、江苏省工业和信息化厅、江苏省国有资产监督管理委员会、苏州市人民政府…...

数据可视化:动态柱状图

终于来到最后一个数据可视化的文章拿啦~~~ 在这里学习如何绘制动态柱状图 我先整个活 (๑′ᴗ‵๑)I Lᵒᵛᵉᵧₒᵤ❤ 什么是pyecharts? 答: Python的Pyecharts软件包。它是一个用于Python数据可视化和图表绘制的库,可用于制作…...

vue3 自定义loading

使用antdv 后发现只有button支持loaidng属性&#xff0c;而其他元素不能使用loading来显示是否加载中&#xff0c;需要套一层 a-spin 才能支持&#xff0c;非常不方便。 所以写了个自定义的指令来进行处理 新建loading.vue文件用来页面显示 <template><div class&q…...

Ceph-deploy跳过gpg-key验证(离线环境安装Ceph)

问题 CentOS-7.6.1810离线环境搭建Ceph环境时出现gpg-key安装源公钥检查错误。原因是执行ceph-deploy install 命令的服务器无法访问互联网。具体报错如下图&#xff1a; 解决 安装命令后新增--no-adjust-repos参数即可跳过安装 GPG 密钥。 命令如下&#xff1a; ceph-deplo…...

想入行单片机开发的学生们的忠告

想入行单片机开发的学生们的忠告 做嵌入式单片机开发十来年。想给那些想入行单片机开发的同学一些建议。 1.想做这行&#xff0c;做好坚持学习的准备。最近很多小伙伴找我&#xff0c;说想要一些单片机的资料&#xff0c;然后我根据自己从业十年经验&#xff0c;熬夜搞了几个通…...

【番外篇】C++语法学习笔记

学习目标&#xff1a;C的一些高级操作 根据C菜鸟教程自学的笔记&#xff0c;大家有想学习C的话可以根据这个网站进行学习。这个推荐有一定基础的再去进行自学。新手的话还是建议直接看一些视频跟着学 学习内容&#xff1a; 1. 运算符重载 说到C中的运算符重载&#xff0c;首…...

js 字符串转数字

在 JavaScript 中&#xff0c;可以使用以下方法将字符串转换为数字&#xff1a; parseInt parseInt()&#xff1a;将字符串转换为整数。它会从字符串的开头开始解析&#xff0c;直到遇到非数字字符为止。如果第一个字符不能转换为数字&#xff0c;则返回 NaN。 let str &qu…...

【NI-DAQmx入门】外部采样时钟相关

1.时钟的作用 时钟在几乎所有测量系统中都起着至关重要的作用。通过硬件定时测量&#xff0c;时钟控制采样或更新的发生时间。与依赖软件计时测量相比&#xff0c;您可以选择硬件定时测量来实现采样或更新之间更一致的时间间隔。以数模转换器特性分析为例。该应用由三个基本部分…...

Amazon EC2 Hpc7g 实例现已在更多区域推出

即日起&#xff0c;Amazon Elastic Compute Cloud (Amazon EC2) Hpc7g 实例将在亚太地区&#xff08;东京&#xff09;、欧洲地区&#xff08;爱尔兰&#xff09;和 Amazon GovCloud&#xff08;美国西部&#xff09;区域推出。Amazon EC2 Hpc7g 实例由 Amazon Graviton 处理器…...

【开题报告】基于SpringBoot的药店药品管理系统的设计与实现

1.研究背景 随着人们对健康的日益关注和医疗技术的不断进步&#xff0c;药店在人们生活中的重要性越来越凸显。药店承担着提供药品和健康咨询等服务的角色&#xff0c;而药品管理是药店运营的核心内容之一。传统的药店药品管理往往依赖人工操作&#xff0c;存在着信息不透明、…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

Java毕业设计:WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...