css滚动贴合ScrollSnap

最新推荐文章于 2024-05-01 02:50:56 发布

高桥靓仔

最新推荐文章于 2024-05-01 02:50:56 发布

阅读量553

点赞数

文章标签： vscode vue.js python

本文链接：https://blog.csdn.net/weixin_45221036/article/details/121613128

版权

css滚动贴合ScrollSnap参考资料：2行 CSS 实现滚动贴合 Scroll Snap 特效scroll-snap-type/*滚动方向x轴，任何时候都强制滚动*/scroll-snap-type: x mandatory;/*滚动方向y轴，接近容器边缘时才滚动*/scroll-snap-type: y proximity;/*滚动方向任意，强制滚动*/scroll-snap-type: both mandatory;语法：none | [ x | y | block |

摘要由CSDN通过智能技术生成

css滚动贴合ScrollSnap

参考资料：

2行 CSS 实现滚动贴合 Scroll Snap 特效

scroll-snap-type

/*滚动方向x轴，任何时候都强制滚动*/
scroll-snap-type: x mandatory;

/*滚动方向y轴，接近容器边缘时才滚动*/
scroll-snap-type: y proximity;

/*滚动方向任意，强制滚动*/
scroll-snap-type: both mandatory;

语法：

none | [ x | y | block | inline | both ] [ mandatory | proximity ]?

mandatory

如果它当前没有被滚动，这个滚动容器的可视视图将静止在临时点上。意思是当滚动动作结束，如果可能，它会临时在那个点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。
proximity

如果它当前没有被滚动，这个滚动容器的可视视图将基于基于用户代理滚动的参数去到临时点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。

需要把滚动条设置在直接父容器上，`scroll-snap-type`才能生效：

下图是滚动条在body上而非直接父容器上，导致scroll-snap-type失效

非父容器滚动

下图是在直接父容器中使用overflow:scroll使得scroll-snap生效

生效scroll-snap

scroll-snap-align

scroll-snap-align: center

center

scroll-snap-align: start

start

scroll-snap-align: end

end

源码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content=

最低0.47元/天解锁文章

高桥靓仔

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css滚动贴合ScrollSnap

css滚动贴合ScrollSnap参考资料：2行 CSS 实现滚动贴合 Scroll Snap 特效scroll-snap-type/*滚动方向x轴，任何时候都强制滚动*/scroll-snap-type: x mandatory;/*滚动方向y轴，接近容器边缘时才滚动*/scroll-snap-type: y proximity;/*滚动方向任意，强制滚动*/scroll-snap-type: both mandatory;语法：none | [ x | y | block |
复制链接

扫一扫