【CSS】scroll-snap属性详解

目录

  • scroll-snap-type
    • 方向:
    • 捕捉强度:
  • scroll-snap-stop
  • scroll-padding
  • scroll-margin
  • 实际使用示例

scroll-snap 是一个用于实现流畅滚动捕捉效果的 CSS 模块。它包含多个属性,可以应用于滚动容器和滚动子项上。

scroll-snap-type

scroll-snap-type 属性定义滚动容器的滚动捕捉行为。

.container {scroll-snap-type: x mandatory; /* 水平方向捕捉,并且是强制性的 */
}

方向:

x:水平方向捕捉
y:垂直方向捕捉
both:双向捕捉

捕捉强度:

mandatory:强制捕捉,滚动会强制停留在捕捉点上
proximity:弱捕捉,滚动到接近捕捉点时会自动停留在捕捉点上
scroll-snap-align
scroll-snap-align 属性定义滚动子项在捕捉点上的对齐方式。

.item {scroll-snap-align: start; /* 子项的起点与捕捉点对齐 */
}

start:子项的起点与捕捉点对齐
end:子项的终点与捕捉点对齐
center:子项的中心与捕捉点对齐
none:子项不参与捕捉对齐

scroll-snap-stop

scroll-snap-stop 属性定义在滚动过程中是否强制捕捉到子项。

.item {scroll-snap-stop: always; /* 强制在此捕捉点停下 */
}

normal:正常捕捉行为
always:总是强制捕捉到此项,即使用户滚动得很快

scroll-padding

scroll-padding 属性定义滚动容器内的内边距,用于调整捕捉点的位置。

.container {scroll-padding: 20px; /* 在滚动容器内增加20px的内边距 */
}

scroll-padding-top、scroll-padding-right、scroll-padding-bottom、scroll-padding-left:分别定义四个方向的内边距

scroll-margin

scroll-margin 属性定义滚动子项的外边距,用于调整捕捉点的位置。

.item {scroll-margin: 10px; /* 在滚动子项周围增加10px的外边距 */
}

scroll-margin-top、scroll-margin-right、scroll-margin-bottom、scroll-margin-left:分别定义四个方向的外边距

实际使用示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Scroll Snap Example</title><style>.container {display: flex;overflow-x: scroll;scroll-snap-type: x mandatory;scroll-padding: 10px;border: 2px solid #ccc;padding: 10px;width: 100%;}.item {flex: 0 0 80%;margin: 0 10px;scroll-snap-align: start;scroll-snap-stop: always;background-color: lightblue;padding: 20px;border-radius: 10px;text-align: center;font-size: 24px;}</style>
</head>
<body><div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div><div class="item">Item 4</div><div class="item">Item 5</div></div>
</body>
</html>

.container:
display: flex;:使子项水平排列。
overflow-x: scroll;:启用水平滚动。
scroll-snap-type: x mandatory;:启用水平强制捕捉。
scroll-padding: 10px;:在容器内增加10px的内边距。

.item:
flex: 0 0 80%;:使每个子项占据容器的80%宽度。
margin: 0 10px;:每个子项之间有10px的间距。
scroll-snap-align: start;:每个子项的起点与捕捉点对齐。
scroll-snap-stop: always;:滚动时总是强制捕捉到此子项。

通过这些属性,可以轻松创建流畅且用户友好的滚动捕捉效果。这些属性的结合使用能够大大提升用户在图片画廊、卡片视图等界面上的体验。

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

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

相关文章

k8s学习--Secret详细解释与应用

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 Secret什么是Secret?Secret四种类型及其特点Secret应用案例&#xff08;1&#xff09;将明文密码进行base64编码&#xff08;2&#xff09;编写创建secret的YAML文…

笔试训练2

牛客.单词搜索 刚开始我就想是搜索&#xff0c;但是不清楚bfs还是dfs更好&#xff0c;我尝试了bfs但是队列存东西&#xff0c;没有我想象的那么好写&#xff0c;所以我决定试试dfs import java.util.*;public class Solution {static int m 0;static int n 0;static int […

【Qt快速入门(一)】- Qt简介

目录 Qt快速入门&#xff08;一&#xff09;Qt简介历史背景跨平台特性核心组件开发工具Qt Creatorqmake和CMake Qt的主要应用领域桌面应用移动应用嵌入式系统游戏开发Web应用 Qt社区和生态系统Qt MarketplaceQt认证 未来发展 Qt快速入门&#xff08;一&#xff09; Qt简介 Qt…

【人工智能Ⅱ】实验8:生成对抗网络

实验8&#xff1a;生成对抗网络 一&#xff1a;实验目的 1&#xff1a;理解生成对抗网络的基本原理。 2&#xff1a;学会构建改进的生成对抗网络&#xff0c;如DCGAN、WGAN、WGAN-GP等。 3&#xff1a;学习在更为真实的数据集上应用生成对抗网络的方法。 二&#xff1a;实验…

SaaS销售新指标|一文带你读懂什么是反向拒付指标

saas企业销售也需要一系列的指标来衡量企业运营情况如何&#xff1f;有哪些值得改善的地方&#xff1f;今天林叔发现一个比较有意思的新指标&#xff1a;反向拒付。希望能帮助saas企业更好的运营。 一、什么是反向拒付&#xff1f; **反向拒付指标&#xff08;反拒付指标&…

C基础-标准库下

上:http://t.csdnimg.cn/qj5uA 目录 七. math.h 八. setjmp.h 九. signal.h 十. stdarg.h 十一.stddef.h 十二. stdio.h 十三. stdlib. 十四. string.h 十五. time.h 七. math.h 定义了各种数学函数和一个宏。 宏和函数描述 序号宏 & 描述1HUGE_VAL 当函数的结…

Vue3——实现word,pdf上传之后,预览功能(实测有效)

vue-office/pdf - npm支持多种文件(**docx、excel、pdf**)预览的vue组件库&#xff0c;支持vue2/3。也支持非Vue框架的预览。. Latest version: 2.0.2, last published: a month ago. Start using vue-office/pdf in your project by running npm i vue-office/pdf. There are …

怎么样的电销机器人才是好的?智能语音机器人部署

在现代社会&#xff0c;营销策略对于企业的成功至关重要。随着技术的发展&#xff0c;电销机器人正在改变传统营销模式&#xff0c;取而代之的是更高效&#xff0c;更自动化和更个性化的方式。 当然&#xff0c;如何选择合适的电销机器人是很重要的。所以&#xff0c;我们就来看…

Mybatis实现树形结构方式

1&#xff0c;三级分类树形结构查询 /*** DDD(Domain-Driven Design): 领域驱动设计** 三级分类树形结构&#xff1b;* 支持无限层级&#xff1b;* 当前项目只有三级*/ Data public class CategoryTreeTo {private Long categoryId; //1private String categoryName;private …

ENVI 5.3/6.0打开Landsat 8/9 C2L2级别数据(带有Metadata),附常见问题

ENVI 5.3/6.0打开Landsat 8/9 C2L2级别数据&#xff08;带有Metadata&#xff09; 文章目录 ENVI 5.3/6.0打开Landsat 8/9 C2L2级别数据&#xff08;带有Metadata&#xff09;前言数据下载ENVI 5.3打开Landsat 8 C2L2级别数据ENVI 5.3打开Landsat 9 C2L2级别数据ENVI 6.0打开La…

RDMA介绍

RDMA全称是Remote Direct Memory Access&#xff0c;即远程直接内存访问&#xff0c;是一种高性能网络通信技术&#xff0c;可以使计算机直接访问远端计算机的内存&#xff0c;而无需在本地和远程计算机之间进行数据复制。 相比于传统的网络通信方式&#xff0c;RDMA技术具有更…

手写防抖debounce

手写防抖debounce 应用场景 当需要在事件频繁触发时&#xff0c;只执行最后一次操作&#xff0c;可以使用防抖函数来控制函数的执行频率,比如窗口resize事件和输入框input事件&#xff1b; 这段代码定义了一个名为 debounce 的函数&#xff0c;它接收两个参数&#xff1a;fn…

颠覆传统:探索Web3对传统计算机模式的冲击

随着Web3技术的崛起&#xff0c;传统计算机模式正面临着前所未有的冲击与挑战。Web3作为下一代互联网的代表&#xff0c;以其去中心化、安全可信的特性&#xff0c;正在颠覆着传统计算机模式的种种假设和局限性。本文将深入探讨Web3对传统计算机模式的冲击&#xff0c;并探索其…

关于stm32的复用和重映射问题

目录 需求IO口的复用和重映射使用复用复用加重映射 总结参考资料 需求 一开始使用stm32c8t6&#xff0c;想实现pwm输出&#xff0c;但是原电路固定在芯片的引脚PB10和PB11上&#xff0c;查看了下引脚的功能&#xff0c;需要使用到复用功能。让改引脚作为定时器PWM的输出IO口。…

PMP应考小技巧有哪些?

首先&#xff0c;制定合理的学习计划。将备考过程分解为小目标&#xff0c;并为每个目标设定截止日期。这样可以帮助我们有条不紊地进行学习&#xff0c;避免拖延和压力过大。 其次&#xff0c;选择适合自己的学习资源。PMP考试教材众多&#xff0c;可以选择一本权威的教材作为…

Idea-Linux远程开发部署

第一步&#xff1a;File->Remote Development 第二步&#xff1a; 第三步&#xff1a; 第四步&#xff1a;在Host位置填写Linux虚拟机的IP地址&#xff0c;在Username、Password填写对应的账号密码后点击Test Connection测试连接。 第五步&#xff1a; 第六步&#xff1a;在…

项目:仿RabbitMQ实现的消息队列组件

文章目录 写在前面开源仓库和项目上线其他文档说明 需求分析BrokerServer交换机类型持久化消息应答 模块划分服务端模块客户端模块交换机数据管理模块队列数据管理模块绑定数据管理模块消息数据管理模块队列信息管理模块虚拟机数据管理模块路由匹配模块消费者管理模块信道管理模…

做店干货|抖音小店找达人的要求以及渠道

大家好&#xff0c;我是喷火龙。 这么多年&#xff0c;我们做店一直是以达人合作为主&#xff0c;商品卡流量为辅&#xff0c;没有快进快出那一套&#xff0c;我们喜欢追求一个店铺的长期经营&#xff0c;长期产出&#xff0c;我们的逻辑是&#xff0c;产品可以死&#xff0c;…

折半查找二分查找

简介 折半查找也就是二分查找&#xff0c;也可以叫二分法&#xff0c;本质上都是一样的&#xff0c;通过比对中间值与目标值&#xff0c;一次性就能筛掉一半的数字。 举例&#xff1a; 一个猜数字游戏&#xff0c;让你来猜1-100中我选中的数&#xff0c;如果猜中游戏结束&…

elementUI输入框/选项卡与百度地图联动

文章目录 输入框/选项卡与百度地图联动示例html部分用到的插件main.js 输入框/选项卡与百度地图联动 示例 输入框/选项卡与百度地图联动 html部分 <template><el-form ref"Froms" :model"formData" label-width"120px"><el-for…