CSS新特性之Scroll Snap？

最新推荐文章于 2024-06-03 19:14:03 发布
最新推荐文章于 2024-06-03 19:14:03 发布
阅读量199 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Problem_Girl/article/details/103997946
版权

CSS新特性之Scroll Snap？

CSS Scroll Snap（CSS滚动捕捉）即在滚动条滚动完停止下来可指定停止位置如头部尾部中间，或者说允许你在用户完成滚动后锁定特定元素或位置。

属性有：

scroll-snap-type：x/y mandatory； //指x轴或y轴方向锁定，mandatory为强制的意思，注意该属性在滚动条的父容器设置即设置overflow：auto；的父容器

scroll-snap-align：start/center/end； //指停下来的位置对齐方式，是中间对齐还是头部尾部对齐。注意该属性是在子项中设置。

加菲猫惹
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 滚动优化 scroll-behavior / scroll-snap-
weixin_44240581的博客
05-08 540
滚动过渡 当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，控制滚动容器的滚动行为 给可滚动容器添加scroll-behavior: smooth，实现平滑滚动 { scroll-behavior: smooth; } 控制滚动结束位置 scroll-snap-type scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ] 设置在父级滚动容器中 x：捕
CSS 使用 sroll-snap-type 优化滚动
weixin_41897680的博客
01-28 1589
前言 最近看chokcoco大佬的css文章，看到了这篇 使用 sroll-snap-type 优化滚动 文章，发现这个属性可以解决我之前遇到的一个问题，于是打算接着这篇文章好好的学习一下。 基础知识 sroll-snap-type 通过设置 scroll-snap-type 将一个滚动容器转变为一个滚动捕捉容器，并且可以控制捕捉的严格度，如果没有指定严格度，默认为非精确的捕捉。 scroll-snap-type 支持设置两个参数，第一个为捕捉轴向，第二个参数为捕捉严格度，可省略。 捕捉轴向 x：捕捉影响
【CSS】scroll-snap属性详解
最新发布
正在解锁骑着骆驼去南极的世界
06-03 833
scroll-snap 是一个用于实现流畅滚动捕捉效果的 CSS 模块。它包含多个属性，可以应用于滚动容器和滚动子项上。
CSS：scroll-snap滚动事件停止及元素位置检测
ting2909的博客
08-17 1363
一、Scroll Snap是前端必备技能 CSS Scroll Snap是个非常好用的特性，可以让网页容器滚动停止的时候，无需任何JS代码的参与，浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯CSS实现。 而且CSS Scroll Snap的兼容性非常好，移动端几乎可以放心使用。 二、源自实际项目的scroll-snap场景 今天下午在实现一个功能需求的时候，正好遇到一个场...
CSS——scroll-snap滚动捕捉的一些属性
m0_63300737的博客
07-03 926
定义在滚动容器中的一个临时点（snap point）如何被严格的执行x: 滚动容器只捕捉其水平轴上的捕捉位置。mandatory: 如果它当前没有被滚动，这个滚动容器的可视视图将静止在临时点上。意思是当滚动动作结束，如果可能，它会临时在那个点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。y: 滚动容器只捕捉其垂直轴上的捕捉位置.proximity:如果它当前没有被滚动，这个滚动容器的可视视图将基于基于用户代理滚动的参数去到临时点上。如果内容被添加、移动、删除或者重置大小，
使用 sroll-snap-type 优化滚动
laokdidiao的专栏
04-01 480
本文转自公众号：iCSS前端趣闻。慕课网推出 CSS 架构课程，一节课解决 CSS 难复用、难维护、难扩展问题（点我）。 根据CSS Scroll Snap Module Level 1[1]规范，CSS 新增了一批能够控制滚动的属性，让滚动能够在仅仅通过 CSS 的控制下，得到许多原本需要 JS 脚本介入才能实现的美好交互。 Tips：本文截的一些 Gif 图涉及容器滚动，效果不是很好，可以点进 Demo 里实际感受下。 sroll-snap-type 首先看看sroll-snap-ty...
CSS scroll-snap滚动事件停止及元素位置检测实现
12-13
**一、CSS Scroll Snap 特性介绍** CSS Scroll Snap 是一种强大的前端技术，它允许网页容器在滚动时自动平滑地定位到指定元素的位置，无需JavaScript的干预。这一特性对于创建类似幻灯片展示、页面分段滚动等效果...
snap-swiper:基于css的scroll-snap-type实现自动轮播的效果插件
04-29
基于css的scroll-snap-type实现自动轮播的效果插件 背景 实现一个很简单的自动轮播的效果 思考： 传统的 swiper 太重了，里面封装了很多我们不需要的功能，一个简单的功能没必要那么中的文件。那就自己实现吧 实现...
css-scroll-snap-polyfill:用于CSS滚动捕捉点的JS polyfill
05-13
css-scroll-snap-polyfill 用于CSS滚动捕捉草稿的Polyfill。 用法 纱 yarn add css-scroll-snap-polyfill NPM npm install --save css-scroll-snap-polyfill 代码示例： import scrollSnapPolyfill from 'css-...
Web-前端html+css从入门到精通 235. CSS新特性之scrollsnap.zip
05-23
本课程重点聚焦于CSS新特性之一：`scroll-snap`，这是一个用于控制滚动行为的特性，能帮助我们创建流畅、精确的滚动体验。 `scroll-snap`特性允许我们定义元素在滚动时如何停靠到特定位置，从而创造出平滑的滚动...
scroll-snap-slider:主要是CSS滑块，性能出色
05-22
该模块包含以下内容： 滚动快照滑块的示例标记没有滚动条的滚动捕捉滑块的SCSS默认样式ES6类可稍微增强功能正在安装yarn add barthy-koeln/scroll-snap-slider用法HTML + CSS足以满足需要使用的滑块的需要。...
使用 CSS Scroll Snap 优化滚动，提升用户体验！
厦门在乎科技
10-18 347
你是否经常希望有一个CSS特性可以轻松创建一个可滚动的容器?CSS scroll snap可以做到这一点。在早期的前端开发中，我依靠 JS 插件来创建滑块组件。 有时，我们需要一种简单的方法来快速将元素制作成可滚动的容器。现在，多亏了CSSS scroll snap，我们可以简单做到这一点。 为什么要使用 CSS Scroll Snap 随着移动设备和平板设备的兴起，我们需要设计和构建可以轻触的组件。 以图库组件为例。 用户可以轻松地向左或向右滑动以查看更多图像，而不是分层结构。 根据CSS...
ScrollSnap全屏滚动效果
qq_36262295的博客
12-31 1011
scrollsnap MDN链接 仅用CSS实现fullpage.js全屏滚动效果 scroll-snap-type scroll-snap-align 并不能替代fullpage.js有下面2个原因 它们在浏览器上面存在兼容性问题。 CSS属性无法监听事件，也就无法提供动画完成时的回调函数。 使用 ，scroll-snap-type属性放在需要全屏滚动的容器的父容器上， 而scroll-snap-align则需要放在全屏滚动的容器上 ，多说无益，我们直接来看一下代码就可以很清楚的知道如何使用这两个CS
使用css实现滚动贴合 Scroll Snap 特效
hktkkkk的博客
10-31 616
使用css实现滚动贴合 Scroll Snap 特效
【干货】使用 CSS Scroll Snap 优化滚动，提升用户体验！
2401_84434331的博客
05-01 693
* 垂直*/.section {
CSS 滚动快照 Scroll Snap
weixin_48003149的博客
12-21 577
CSS 新特新：滚动捕捉
CSS 滚动捕获 Scroll Snap
broken_promise的博客
11-06 722
CSS滚动捕获允许开发者通过声明一些位置(或叫作捕获位置)来创建精准控制的滚动体验. 通常来说轮播图就是这种体验的例子, 在轮播图中, 用户只能停在图A或者图B, 而不能停在A和B的中间.比如平时用淘宝或小红书, 当你上滑到下一个推荐内容时, 页面不会停留在两个推荐内容之间. 有限的手机屏幕尺寸对于这种一项一项展示的内容来说, 需要精准的滑动提供良好的体验. 当然默认情况下, 是滚动到哪里就显示什么内容, 不会存在所谓的「吸附」行为CSS。
css scroll-snap控制滚动元素
weixin_43294560的博客
10-16 773
注意正常的padding在scroll-snap中用来控制停止后相对滚动容器的位置会失效用于精细控制滚动停止后元素相对于滚动容器的位置} li {}
强大的CSS：scroll-snap滚动事件停止及元素位置检测
web前端开发学习教程
05-21 554
一、Scroll Snap是前端必备技能 CSS Scroll Snap是个非常好用的特性，可以让网页容器滚动停止的时候，无需任何JS代码的参与，浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯CSS实现。 而且CSS Scroll Snap的兼容性非常好，移动端几乎可以放心使用。 二、源自实际项目的scroll-snap场景 今天下午在实现一个功能需求的时候，正好遇到一个...
css控制滚轮的滚动速度
05-27
可以使用CSS的`scroll-behavior`属性来控制滚轮的滚动速度，具体实现方法如下： 1. 设置元素的`scroll-behavior`属性为`smooth`，表示元素在滚动时需要平滑滚动。 ```css .element { scroll-behavior: smooth; } ``` 2. 在元素的父级容器中设置`scroll-snap-type`属性，表示元素在滚动时需要停留在特定的位置。同时，还可以设置`scroll-snap-align`属性来指定停留位置的对齐方式。 ```css .parent { scroll-snap-type: y mandatory; scroll-snap-align: start; } ``` 3. 可以使用`scroll-padding`属性来设置元素的内边距，以避免元素滚动到顶部或底部时被遮挡。 ```css .element { scroll-padding: 20px; } ``` 通过以上CSS属性的设置，可以控制滚轮的滚动速度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值