scroll-snap-type——有滚动容器下吸附至吸附点的严格程度——css基础

scroll-snap-type有滚动容器下吸附至吸附点的严格程度:https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type

此属性不为吸附点指定任何确切的动画或运行规律,留待用户代理处理。

//不吸附
scroll-snap-type:none;
//表示吸附轴的关键字
scroll-snap-type:x;
scroll-snap-type:y;
scroll-snap-type:block;
scroll-snap-type:inline;
scroll-snap-type:both;
//表示吸附程度的可选关键字
//mandatory或proximity
scroll-snap-type:x mandatory;
scroll-snap-type:y proximity;
scroll-snap-type:both mandatory;
//全局值
scroll-snap-type:inherit;
scroll-snap-type:initial;
scroll-snap-type:revert;
scroll-snap-type:revert-layer;
scroll-snap-type:unset;

none:在滚动此滚动容器的可见视口时,必须忽略吸附点
x:滚动容器仅在其横轴上吸附至吸附位置
y:滚动容器仅在其纵轴上吸附至吸附位置
block:滚动容器仅在其块向轴上吸附至吸附位置
inline:滚动容器仅在其行向轴上吸附至吸附位置
both:滚动容器在其两轴上独立的吸附至吸附位置(可能在各轴上吸附至不同的元素)
mandatory:若滚动容器当前未在滚动,则其可见视口必须吸附至吸附位置
proximity:若滚动容器当前未在滚动,则其可见视口可以吸附至吸附位置,是否吸附由用户代理根据滚动参数决定,若指定了吸附轴,则此为默认的吸附程度。

备注:若吸附口中的内容发生变动(如被添加,移动,删除或改变尺寸)或者与滚动吸附相关的任意属性(如scroll-snap-type或scroll-margin)的值发生变化,则滚动容器将按照scroll-snap-type最新的值重新吸附。
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

参考链接:
https://segmentfault.com/a/1190000038459089#item-10

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

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

相关文章

IPD在卷烟工业企业研发管理中应用

一、 什么是IPD IPD是Integrated Product Development几个英文单词的缩写,译成汉语就是“集成产品研发”,是上世纪九十年代以来世界上盛行的企业产品研发管理的成功模式。下文中汉捷咨询对IPD的由来进行分享。 最先将IPD付诸实践的是美国IBM公司。1992…

AI绘图副业创收,热门擦边变现赛道怎么玩?网友:瑟瑟才是人类前进的动力!

大家好,我是设计师阿威 今天给大家介绍一个用 AI 搞擦边的变现赛道 而且可以说是0 成本变现的 现在真的越来越多的人都想 0 成本变现,那么 0 成本到底能不能变现,变现的上下限又是多少? 今天这个案例就可以很好的进行说明 可以…

2025秋招计算机视觉面试题(二)

面试题目录 Yolov5中的objectness的作用目标检测设置不同的anchor改善小目标及非正常尺寸目标的性能在目标Crowded的场景下经常出现误检的原因Unet网络结构中四次降采样的必要性为什么UNet++可以被剪枝在不同场景下进行目标的标记及训练以取得好的效果如何修改Yolov5目标检测实…

键值对系统的一致性

使用一致性哈希环,可以给下n个服务器发送消息,从而数据复制 分布式集群的一致性 强一致性模型:在写入数据时不能读 弱一致性模型:可能读到不是最新的数据 最终一致性模型:弱一致性模型的一种形态,经过足够…

id3算法【python,算法,机器学习】

ID3 算法, 即 Iterative Dichotomiser 3(迭代二分器第三代)。算法通过迭代地选择具有最高信息增益的特征来分割数据集,从而递归地生成决策树模型,直至数据集被完美分类或无可分割的特征为止。 ID3 构建决策树的流程: 找到最优特…

怎么检查阿里云的ECS机器上是不是有GPU资源

要检查阿里云 ECS 实例上是否有 GPU 资源,可以使用以下命令: lspci | grep -i nvidia这个命令将显示与 NVIDIA GPU 相关的信息。如果有输出,表示你的 ECS 实例上存在 NVIDIA GPU 资源。 如果你无法找到 lspci 命令,你可能需要安…

GPT-4o流式数据处理 Extra data: line 3 column 1 (char 254

背景:新的大模型生成的流式数据是多个data在一起的输出,卧槽,难怪这么快的速度。 经研究发现还是有流式数据从中间切断了,具体如下示例: bdata: {"id":"chatcmpl","object":"chat.completion.chunk","created":17158…

路由引入实验(华为)

思科设备参考:路由引入实验(思科) 技术简介 路由引入技术在网络通信中起着重要的作用,能够实现不同路由协议之间的路由传递,并在路由引入时部署路由控制,实现路径或策略的控制 实验目的 不同的路由协议之…

python web自动化(Pytest实战)

1.UnitTest框架与Pytest框架对⽐ 1) unittest框架介绍 Unittest则是Python语⾔的标准单元测试框架。 Unittest⽀持⾃动化测试,测试⽤例的初 始化、关闭和测试⽤例的聚合等功能,它有⼀个很重要的特性&#xff…

FastThreadLocal 为什么那么快

在并发编程中,ThreadLocal提供了一种便捷的方式来存储线程独有的数据。然而,在高性能网络框架如Netty中,标准的ThreadLocal实现可能带来一定的性能开销。因此,Netty提供了FastThreadLocal作为替代方案,显著提升了性能。…

深度学习-转置卷积

转置卷积 转置卷积(Transposed Convolution),也被称为反卷积(Deconvolution),是深度学习中的一种操作,特别是在卷积神经网络(CNN)中。它可以将一个低维度的特征图&#x…

jar包读取properties配置文件错误,返回null

现象: 使用intellij Idea编写java项目,debug调试时,使用redis.properties文件的类A,A的代码可以使用 “InputStream in RedisUtils.class.getClass().getResourceAsStream("/" proPath);” 方式正常读取redisConfig…

Java面试八股之有哪些线程安全的集合类

Java中有哪些线程安全的集合类 在Java中,并非所有的集合类都是线程安全的,但在多线程环境下,确保集合操作的线程安全性至关重要。以下是几个典型的线程安全集合类: Vector: 类似于ArrayList,但它是线程安全的。它通过…

搭建python环境

要想能够进行python开发,就需要搭建好python的环境。 需要安装的环境主要是两个部分: 运行环境:python 开发环境:pycharm 官方网站:https://www.python.org pycharm软件调节字体大小 pycharm 软件调节背…

QT C++ QTableWidget 演示

本文演示了 QTableWidget的初始化以及单元格值改变时响应槽函数,打印单元格。 并且,最后列不一样,是combobox ,此列的槽函数用lambda函数。 在QT6.2.4 MSVC2019 调试通过。 1.界面效果 2.头文件 #ifndef MAINWINDOW_H #define MAINWINDOW…

vue小记——小组件(1)

代码&#xff1a; <template><div><el-steps :active"active" finish-status"success" simple><el-step title"数据导入"><i class"fa fa-cloud-upload fa-icon-custom" slot"icon"></i…

【Python】—— 推导式

目录 &#xff08;一&#xff09;列表推导式 示例&#xff1a;创建一个0-10的列表 示例&#xff1a;带有条件的列表推导式 示例&#xff1a;多个for循环实现列表推导式 &#xff08;二&#xff09;字典推导式 &#xff08;三&#xff09;集合推导式 总结 &#xff08;一&a…

大语言模型预训练新前沿:「最佳适配打包」重塑文档处理标准

源自&#xff1a;机器之心 "人工智能技术与咨询“ 发布 声明:公众号转载的文章及图片出于非商业性的教育和科研目的供大家参考和探讨&#xff0c;并不意味着支持其观点或证实其内容的真实性。版权归原作者所有&#xff0c;如转载稿涉及版权等问题&#xff0c;请立即联系…

MySQL的自增ID连续性控制变量innodb_autoinc_lock_mode

查看 innodb_autoinc_lock_mode 的值 在 MySQL 命令行客户端中使用“SHOW VARIABLES”查看&#xff1a; MySQL [mydb]> SHOW VARIABLES LIKE innodb_autoinc_lock_mode; --------------------------------- | Variable_name | Value | -----------------------…

简单谈一下微服务

微服务&#xff0c;说这个之前我们先了解一下soa&#xff0c;这个十几年前的火热词汇&#xff0c;说实话&#xff0c;虽然我是一个计算机行业人士&#xff0c;但是很反感这种造词的风气&#xff0c;尤其是云里雾里&#xff0c;旧瓶装新酒的&#xff0c;作为一个it技术&#xff…