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 成本到底能不能变现,变现的上下限又是多少? 今天这个案例就可以很好的进行说明 可以…

路由引入实验(华为)

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

python web自动化(Pytest实战)

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

深度学习-转置卷积

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

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…

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

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

BGP(一)边界网关协议

BGP协议基础 路由分类 直连路由 非直连路由&#xff08;间接路由&#xff09; 静态路由动态路由 IGP&#xff1a;内网网关路由协议&#xff08;在企业内部或数据中心内部使用&#xff09; DV&#xff1a;距离矢量路由协议RIP&#xff08;v1/v2&#xff09;IGRP——网络直径&…

【易生支付官网注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

【会议征稿,IEEE独立出版】第四届计算机技术与信息科学国际研讨会(ISCTIS 2024)

第四届计算机技术与信息科学国际研讨会&#xff08;ISCTIS 2024)将于2024年7月12-14日在中国西安举行。大会将邀请国内外计算机技术与信息科学领域的知名专家学者出席会议&#xff0c;在大会上通过主题演讲、口头报告等方式与学者们分享最新研究成果、交流探讨学术难题。同时&a…

彩信JSON接口对接发送

随着通讯技术的飞速发展&#xff0c;传统的短信已经无法满足人们日益增长的沟通需求。在这样的背景下&#xff0c;群发彩信作为一种更为先进、更为丰富的信息传递方式&#xff0c;逐渐受到了企业和个人的青睐。那么&#xff0c;群发彩信应该怎么对接&#xff0c;又具体有哪些优…

模特百度百科怎么做出来的

百度百科是一个公正、开放、客观的平台&#xff0c;收录了大量的百科词条内容&#xff0c;形成了一定的“权威性”。以下是关于模特百度百科制作的具体步骤和注意事项&#xff1a; 准备阶段 收集资料&#xff1a;为了确保参赛作品的真实性和权威性&#xff0c;需要收集相关信息…

招展工作全面启动!2024深圳国际数字能源展览会

2024深圳国际数字能源展览会 2024 International Digital Energy Expo 时间:2024年9月8-11日 地点:深圳会展中心 指导单位&#xff1a; 国家能源局 深圳市人民政府 中国电力企业联合会 主办单位&#xff1a; 深圳市投资控股有限公司 深圳能源集团股份有限公司 深圳市资…

【Android14 ShellTransitions】(一)开篇

说来惭愧&#xff0c;AndroidU都已经开发这么久了&#xff0c;但是我还没有整理过ShellTransition相关的知识。我本来希望能够系统的写一篇关于ShellTransition的笔记出来&#xff0c;但是发现一来这是一个比较庞大的模块&#xff0c;二来我个人能力有限&#xff0c;对ShellTra…

插件“猫抓”使用方法 - 浏览器下载m3u8视频 - 合并 - 视频检测下载 - 网课下载神器

前言 浏览器下载m3u8视频 - 合并 - 网课下载神器 chrome插件-猫抓 https://chrome.zzzmh.cn/info/jfedfbgedapdagkghmgibemcoggfppbb 步骤&#xff1a; P.s. 推荐大佬的学习视频&#xff01; 《WEB前端大师课》超级棒&#xff01; https://ke.qq.com/course/5892689#term_id…

discuzX2.5的使用心得 札记一

从开始接受php论坛的开发任务&#xff0c;对php感兴趣的我开始迷恋上discuz这个产品了&#xff0c; 像戴志康这样的创新人才&#xff0c;是我们这代人的骄傲和学习的榜样 应该是了解一下&#xff0c;啥事discuzX2.5&#xff0c;百度看一下 discuz x2.5_百度百科 看完百度词条…

C语言 | Leetcode C语言题解之第101题对称二叉树

题目&#xff1a; 题解&#xff1a; /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ bool isSymmetric(struct TreeNode* root) {if (root NULL) return true;//如果根为空直接…