CSS滚动捕获 scroll-snap-align

CSS滚动捕获 scroll-snap-align

看到 align, 就条件反射想到对齐方式, 嗯猜对了. 不过要先看一下若干名词介绍

scroll-snap-align 指定了盒子的 snap position, 即盒子 snap area 和滚动容器的 snapport 的对齐方式.

这个属性是定义在滚动元素上, 而不是滚动容器上

语法

这个属性可以指定两个值, 分别表示 y(块方向) 轴和 x(内联方向) 轴的对齐. 如果只指定一个值, 那么第二个值保持相同.

  • none: 默认值, 无滚动捕获行为.

  • start: 盒子的 snap position 的顶部与 snapport 顶部对齐

    • 在这里插入图片描述
  • end: 盒子的 snap position 的尾部与 snapport 尾部对齐

    • 在这里插入图片描述
  • center: 盒子的 snap position 的中间与 snapport 中间对齐

    • 在这里插入图片描述

和 scroll-margin 的关系

在前面的定义中已经说过了, 这个属性对齐的不是盒子的 border box 而是盒子 snap area, 即 border box 加上 scroll-margin

我们来点 CSS, 给滚动容器的第二个元素加上 40pxscroll-margin-top

.item {scroll-snap-align: center;
}
.item:nth-child(2) {scroll-margin-top: 40px;
}
.item:nth-child(2)::before {content: '';height: 40px;outline: 2px dashed #111;
}

元素都是居中对齐, 但是第二个元素算居中位置的时候把 40px 也加上了. 好家伙

在这里插入图片描述

和 scroll-padding 的关系

同样是前面的定义, 对齐不是发生在滚动容器上, 而是滚动容器的 snapport 上, 即滚动容器减去其 scroll-padding.

📖 注意 scroll-padding 并不像 padding 一样会渲染出高度, 但是它有它的位置.

.container {overflow: scroll;scroll-snap-type: y mandatory;scroll-padding-top: 40px;
}

你会发现, 元素对齐区域变成了黑色虚线下面的区域, 而不再是整个滚动容器.

在这里插入图片描述

最后大家可以手动试一下, 加上 scroll-paddingscroll-margin 双重 buff 的滚动捕获时什么样的.

兼容性

在这里插入图片描述

谢谢你看到这里😊 大家周末开心呀

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

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

相关文章

Java的三大特性-继承

【1】生活案例: ATM , 电线 【2】Java中封装的理解: 将某些东西进行隐藏,然后提供相应的方式进行获取。 我们程序设计追求“高内聚,低耦合”。 ➢高内聚:类的内部数据操作细节自己完成,不允许外部干涉; ➢低耦…

Python与ArcGIS系列(八)通过python执行地理处理工具

目录 0 简述1 脚本执行地理处理工具2 在地理处理工具间建立联系0 简述 arcgis包含数百种可以通过python脚本执行的地理处理工具,这样就通过python可以处理复杂的工作和批处理。本篇将介绍如何利用arcpy实现执行地理处理工具以及在地理处理工具间建立联系。 1 脚本执行地理处理…

《Fine-Grained Image Analysis with Deep Learning: A Survey》阅读笔记

论文标题 《Fine-Grained Image Analysis with Deep Learning: A Survey》 作者 魏秀参,南京理工大学 初读 摘要 与上篇综述相同: 细粒度图像分析(FGIA)的任务是分析从属类别的视觉对象。 细粒度性质引起的类间小变化和类内…

【C++11并发】thread 笔记

简介 进程和线程的区别 进程:一个在内存中运行的应用程序。每个进程都有自己独立的一块内存空间,一个进程可以有多个线程,比如在Windows系统中,一个运行的xx.exe就是一个进程。 线程:进程中的一个执行任务&#xff08…

Android MQTT开发之 Hivemq MQTT Client

使用一个开源库:hivemq-mqtt-client,这是Java生态的一个MQTT客户端框架,需要Java 8,Android上使用的话问题不大,需要一些额外的配置,下面列出了相关的配置,尤其是 packagingOptions,…

python之代理ip的配置与调试

目录 前言 一、代理IP的配置 二、代理IP的调试 2.1 使用curl命令测试代理IP 2.2 使用requests库调试代理IP 三、代理IP的获取 3.1 使用代理IP池 3.2 使用付费代理IP服务 总结 前言 代理IP是网络爬虫中常用的技术手段。通过使用代理服务器,可以实现对特定网…

某60区块链安全之不安全的随机数实战一

区块链安全 文章目录 区块链安全不安全的随机数实战一实验目的实验环境实验工具实验原理实验内容攻击过程分析合约源代码漏洞EXP利用 不安全的随机数实战一 实验目的 学会使用python3的web3模块 学会以太坊不安全的随机数漏洞分析及利用 实验环境 Ubuntu18.04操作机 实验工…

【Flink】核心概念:并行度与算子链

并行度(Parallelism) 当要处理的数据量非常大时,我们可以把一个算子操作,“复制”多份到多个节点,数据来了之后就可以到其中任意一个执行。这样一来,一个算子任务就被拆分成了多个并行的“子任务”&#x…

爱上C语言:操作符详解(下)

🚀 作者:阿辉不一般 🚀 你说呢:生活本来沉闷,但跑起来就有风 🚀 专栏:爱上C语言 🚀作图工具:draw.io(免费开源的作图网站) 如果觉得文章对你有帮助的话,还请…

STM32/N32G455国民科技芯片驱动DS1302时钟---笔记

这次来分享一下DS1302时钟IC,之前听说过这个IC,但是一直没搞过,用了半天时间就明白了原理和驱动,说明还是很简单的。 注:首先来区分一下DS1302和RTC时钟有什么不同,为什么不直接用RTC呢? RTC不…

计蒜客T1723 约瑟夫问题(C语言实现)

【题目描述】 传说约瑟夫当年活下来就是靠快速计算这个问题。n个人围成一圈,编号依次为1,2,3…n。从第一个人开始报数,数到m的人再出圈。以此类推,直到所有的人都出列。请输出依次出圈人的编号。 【输入格式】 两个整数n,m,均在[1…

[Vue 代码模板] Vue3 中使用 Tailwind CSS + NutUI 实现侧边工具栏切换主题

文章归档:https://www.yuque.com/u27599042/coding_star/vzkgy6gvcnpl3u2y 效果示例 配置 src 目录别名 https://www.yuque.com/u27599042/coding_star/ogu2bhefy1fvahfv 配置 Tailwind CSS https://www.yuque.com/u27599042/coding_star/yqzi9olphko9ity1 配置…

CAPL编程 - 事件驱动

1 事件概述 CAPL是一种面向过程、由事件驱动的类C语言。 事件驱动针对于顺序执行,其区别如下: 顺序执行:顺序执行流程中,子例程或过程函数按照代码编写顺序逐句执行。 事件驱动:CAPL程序由事件驱动,工程…

11.15 监控目录文件变化

监视对指定目录的更改,并将有关更改的信息打印到控制台,该功能的实现不仅可以在内核层,在应用层同样可以。程序中使用ReadDirectoryChangesW函数来监视目录中的更改,并使用FILE_NOTIFY_INFORMATION结构来获取有关更改的信息。 Re…

Selenium中元素定位方法详细介绍

📢专注于分享软件测试干货内容,欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!📢交流讨论:欢迎加入我们一起学习!📢资源分享:耗时200小时精选的「软件测试」资…

JavaScript实现飞机发射子弹详解(内含源码)

JavaScript实现飞机发射子弹 前言实现过程源码展示源码讲解HTML结构CSS结构js结构 前言 文本主要讲解如何利用JavaScript实现飞机发射子弹,实现过程以及源码讲解。实现效果图如下: 实现过程 首先,找到飞机和子弹的UI图,gif图最…

外贸B2C独立站如何做?

外贸B2C独立站是一种直接向海外消费者销售产品的商业模式。它通常包括建立一个自己的在线商店,通过社交媒体、广告和搜索引擎等渠道吸引流量,并使用国际支付和物流服务来处理订单。以下是一些关于如何建立和运营外贸B2C独立站的建议: 确定目标…

【Android】使用Retrofit2发送异步网络请求的简单案例

添加网络权限到AndroidManifest.xml清单文件 为了让你的Android应用程序能够使用互联网进行通信&#xff0c;你需要在AndroidManifest.xml文件中添加网络权限声明。<uses-permission android:name"android.permission.INTERNET"/> 这个权限应该添加到 Android…

C/C++模板类模板与函数模板区别,以及用法详解

类模板 类模板语法 类模板作用&#xff1a; 建立一个通用类&#xff0c;类中的成员 数据类型可以不具体制定&#xff0c;用一个虚拟的类型来代表。 语法&#xff1a; template<typename T> 类解释&#xff1a; template --- 声明创建模板 typename --- 表面其后面的…

python爬虫概述及简单实践:获取豆瓣电影排行榜

目录 前言 Python爬虫概述 简单实践 - 获取豆瓣电影排行榜 1. 分析目标网页 2. 获取页面内容 3. 解析页面 4. 数据存储 5. 使用代理IP 总结 前言 Python爬虫是指通过程序自动化地对互联网上的信息进行抓取和分析的一种技术。Python作为一门易于学习且强大的编程语言&…