Chrome69 中的css新特性scroll-snap

最新推荐文章于 2025-04-07 20:01:40 发布
转载 最新推荐文章于 2025-04-07 20:01:40 发布 · 153 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5b94df9f5188255c520cf5a2

本文介绍如何使用CSS的scroll-snap属性轻松实现轮播图和平滑区块滚动的效果，无需依赖JavaScript即可完成平滑过渡，提升用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

scroll-snap能做什么

css的特性都是为了解决现实中存在的问题而提出的，那scroll-snap能解决平时开发的什么问题呢？主要是轮播图和长文区块间滚动，日常开发中为了实现这两类效果我们往往需要借助js来实现滚动时的平滑过渡，而有了scroll-snap我们则可以摆脱js直接使用css来实现这类效果，下面就让我们看看具体怎么做。

scroll-snap的属性

scroll-snap-type: 这个属性定义了滚动捕捉的方向和捕捉的方式，作用于滚动容器中，捕捉的方向有x、y、both这三个值，而捕捉的类型有mandatory, proximity这两个值，第一滚动方向还是很好理解的，而第二个滚动捕捉的类型是是什么意思呢，在接下来的例子中我们将进行说明。 scroll-snap-align： 这个属性定义了滚动捕捉容器中子元素的滚动对其方式，作用域滚动元素自身，值有start、center、end三个

具体示例

CodePen地址

参考文章：google-developers-scroll-snap

使用CSS美化Chrome下的滚动条样式
justforuse的博客
07-10 1万+
浏览器原生的滚动条有时过多会影响界面美观，IE下的滚动条更是如此，有时我们需要美化一下滚动条，可以使用浏览器原生的样式，或者使用JS插件，这里介绍如何修改Chrome下的滚动条样式。主要借助伪元素实现：//index.html <body> <div class="container"> <p>Pellentesque habitant morbi tristique sen
CSS中的scroll-snap-type属性：实现滚动捕捉以提升用户体验
weixin_41455464的博客
06-23 613
滚动捕捉（Scroll Snapping）是一种让用户在滚动时，页面或容器会自动对齐到某些预定义的位置的功能。这有点像你在手机上浏览图片时，每张图片都会自动对齐到屏幕中央的效果。通过这种方式，用户可以更轻松地浏览内容，而不会因为滚动条的随意移动而感到迷失。通过今天的学习，我们了解了如何使用来实现滚动捕捉，从而提升用户的滚动体验。无论是垂直滚动、水平滚动，还是多轴滚动，都能帮助我们创建更加流畅和一致的滚动效果。
css scroll-snap-type不生效解决方法
lx233
04-07 102
是因为子元素还要设置snap-start。
chrome css 滚动条
z_z_Dragon的博客
06-25 397
::-webkit-scrollbar {  width: 8px;  background-color: #F5F5F5;}/*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track {  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  background: #fff ;}/*定义滑块 内阴影+圆角*/::-w...
[分享] 通过修改CSS自定义chrome滚动条样式
热门推荐
记得微笑的专栏
02-17 1万+
首先得说一句 我不懂CSS的写法之类的 这段CSS也是在网上找的 所以有更先进的需求的话 我肯定不能满足你们了 不好意思 效果图在10楼有人上了 我这边不管怎么弄 上传图片都卡在96% 而且不翻wall不能回帖 翻wall的情况下 上论坛这个慢啊 所以 大家去看这个图吧http://bbs.kafan.cn/forum.php?mo ... &fromuid=487958 大家都知道哈 c
CSS 设置滚动条样式
花铛
12-02 758
目前，基于 webkit 内核的浏览器总体市场占用率比较高；特别是在移动端，大部分浏览器都是基于 webkit。
web前端入门到实战：CSS 滚动捕捉技术（Scroll Snapping）
前端工程师年薪30万，就靠这套教程！持续更新最新知识
05-05 798
CSS 滚动捕捉允许用户完成滚动之后将视口锁定到某个元素的位置。非常适合用来建立下面这样的应用： 基本使用 实现滚动捕捉主要依靠两个属性：容器元素的 scroll-snap-type 属性，以及子元素的 scroll-snap-align 属性。最基本的使用方式如下： 专门建立的学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧 （从零基...
CSS 滚动捕获 Scroll Snap
broken_promise的博客
11-06 843
CSS滚动捕获允许开发者通过声明一些位置(或叫作捕获位置)来创建精准控制的滚动体验. 通常来说轮播图就是这种体验的例子, 在轮播图中, 用户只能停在图A或者图B, 而不能停在A和B的中间.比如平时用淘宝或小红书, 当你上滑到下一个推荐内容时, 页面不会停留在两个推荐内容之间. 有限的手机屏幕尺寸对于这种一项一项展示的内容来说, 需要精准的滑动提供良好的体验. 当然默认情况下, 是滚动到哪里就显示什么内容, 不会存在所谓的「吸附」行为CSS。
CSS 滚动捕获 scroll-margin
broken_promise的博客
12-02 1389
TOC/TOC。
革命性创新，动画杀手锏 @scroll-timeline
「 虚幻私塾」
03-07 497
Python微信订餐小程序课程视频 https://edu.youkuaiyun.com/course/detail/36074 Python实战量化交易理财系统 https://edu.youkuaiyun.com/course/detail/35475 在 CSS 规范 Scroll-linked Animations 中，推出了一个划时代的 CSS 功能。也就是 – The @scroll-timeline at-rule，直译过来就是滚动时间线。 本文，就将带大家一探究竟，从入门到学会使用 CSS @scroll-time
优化滚动的一个小技巧：scroll-snap-type
Brilliant Me 的博客
02-24 5743
scroll-snap-type 优化滚动 CSS 新增了一批能够控制滚动的属性，让滚动能够在仅仅通过 CSS 的控制下，得到许多原本需要 JS 脚本介入才能实现的美好交互。 scroll-snap-type CSS 属性定义在滚动容器中的一个临时点（snap point）如何被严格的执行。 语法 scroll-snap-type:none | [ x | y | block | inline | both ] [ mandatory | proximity ]? 参数解析 none:当这个滚动容器的可视的
学习CSS Scroll Snapping与scroll-snap-align
zgrbsbf的专栏
10-29 3647
假如有个Web页面是一块一块的，如下图所示： 我们希望可以一块一块的滚动，比如当前一个块滚出去了一部分并且后一个块滚进来一部分的时候，实现后一个块自动滚入或者前一个块回弹到初始位置这种效果，以前的时候用js需要写比较复杂的判断逻辑，后来有了一个css scroll snap这个方法，可以比较方便的实现想要的效果了，基本够用。 基本页面 css代码： ul { max-height: ...
[css] scroll-snap-align属性的应用场景是什么？
歌谣的博客
01-29 543
[css] scroll-snap-align属性的应用场景是什么？ 滚动一个列表时，控制列表中一个块始终完全在可视区内,如果滚动到一半可以回弹，保持整个块都在可视区。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
电赛历年试题&经验分享.7z
08-12
电赛历年试题&经验分享.7z
PLC立体车库智能仿真系统：基于博途V15的西门子1200PLC控制与触摸屏操作 - PLC编程 v1.5
08-12
基于博途V15软件平台构建的3×2立体车库智能仿真系统。该系统采用西门子1200PLC进行控制，配备触摸屏操作界面，实现了自动出入库、电梯式小车移动以及变频器输出等功能。文中展示了详细的程序注释和模块化编程方法，如使用TON定时器实现载车板升降的速度控制，利用FC块封装车辆检测模块，通过GRAPH语言编写自动出入库逻辑等。此外，还提到了系统的IO表设计和故障处理机制，以及未来可能加入AI算法进行智能车位分配的设想。 适合人群：对PLC编程、工业自动化控制系统感兴趣的工程师和技术爱好者。 使用场景及目标：适用于学习和研究PLC编程技巧、工业自动化控制系统的仿真开发，帮助理解和掌握PLC控制逻辑、触摸屏交互设计、变频器仿真等关键技术。 其他说明：该项目不仅提供了完整的源代码和详细的注释，还能在博途PLCSIM Advanced环境中进行全仿真测试，为实际工程应用提供宝贵的经验和参考。
LuWu-陆吾，一个简单的无代码深度学习平台
08-12
资源下载链接为： https://pan.quark.cn/s/2f73b93e37c3 LuWu——陆吾，一个简单的无代码深度学习平台。（最新、最全版本！打开链接下载即可用！）
Python自动化测试框架pytest入门与实战.doc
08-12
Python自动化测试框架pytest入门与实战.doc
统计学习,机器学习,神经网络,深度学习,使用matlab实现
08-12
资源下载链接为： https://pan.quark.cn/s/6c421a94aa8d 统计学习,机器学习,神经网络,深度学习,使用matlab实现.（最新、最全版本！打开链接下载即可用！）
基于springboot的物流管理平台设计与实现.docx
最新发布
08-12
基于springboot的物流管理平台设计与实现
uniapp scroll-view scroll-snap-type scroll-snap-align
04-30
### uni-app 中 `scroll-view` 组件的 `scroll-snap-type` 和 `scroll-snap-align` 用法 在 uni-app 开发中，虽然原生 HTML/CSS 提供了 `scroll-snap-type` 和 `scroll-snap-align` 属性来实现滚动吸附效果[^1]，但在微信小程序或其他平台下，这些 CSS 属性可能无法直接应用于 `scroll-view` 组件。因此，在实际开发过程中需要借助一些额外的方式实现类似的滚动吸附功能。 以下是基于 uni-app 的解决方案： #### 实现方案 可以通过自定义样式以及 JavaScript 动态监听滚动事件的方式来模拟滚动吸附的效果。下面是一个完整的示例代码： ```html <template> <view class="container"> <!-- 使用 scroll-view 容器 --> <scroll-view class="scroll-container" scroll-x="true" @scroll="onScroll" :scroll-left="scrollLeft" enhanced :show-scrollbar="false" > <!-- 子项列表 --> <view v-for="(item, index) in items" :key="index" class="scroll-item" :class="'item-' + (index + 1)" > {{ item }} </view> </scroll-view> </view> </template> <script> export default { data() { return { items: ['Item 1', 'Item 2', 'Item 3'], // 数据源 currentIndex: 0, // 当前选中的索引 scrollLeft: 0, // 控制横向滚动位置 }; }, methods: { onScroll(e) { const { detail } = e; let currentOffset = Math.round(detail.scrollLeft / this.getWindowWidth()); if (currentOffset !== this.currentIndex) { this.currentIndex = currentOffset; this.scrollToIndex(this.currentIndex); } }, scrollToIndex(index) { this.scrollLeft = index * this.getWindowWidth(); }, getWindowWidth() { return uni.getSystemInfoSync().windowWidth; // 获取窗口宽度 } }, }; </script> <style scoped> .container { width: 100%; } /* 滚动容器 */ .scroll-container { display: flex; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 单个子项 */ .scroll-item { min-width: 100vw; height: 100vh; box-sizing: border-box; text-align: center; line-height: 100vh; font-size: 24px; } .item-1 { background-color: lightblue; } .item-2 { background-color: lightgreen; } .item-3 { background-color: lightcoral; } </style> ``` #### 关键点解析 1. **`scroll-view` 配置** - 设置 `scroll-x="true"` 来允许水平方向上的滚动。 - 添加 `enhanced` 属性以增强 `scroll-view` 的性能和能力[^3]。 - 利用 `@scroll` 事件监听滚动行为并计算当前显示的内容区域。 2. **动态调整滚动位置** - 计算每次滚动的距离，并通过 `scrollLeft` 参数精确控制滚动到指定的位置。 - 结合设备屏幕宽度 (`uni.getSystemInfoSync().windowWidth`) 自适应不同分辨率下的布局需求。 3. **CSS 样式优化** - 虽然标准的 `scroll-snap-type` 和 `scroll-snap-align` 不被完全支持，但可以模仿其逻辑设计滚动体验。 - 确保每个子项占据整个视口宽高，从而达到视觉上的“吸附”效果。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值