#codepen #demo #CSS #前端 #新特性
Can You Build A Swipe UI With Only CSS?

这个 Codepen 例子使用了现代 CSS 的 Scroll Snap (滚动捕捉) 和 Container Queries (容器查询) 特性，来实现类似原生应用的滑动操作（如左滑删除、右滑收藏）

虽然 CSS 处理了滑动交互，但浏览器默认的滚动位置通常是 0（最左边）。因为左边有一个按钮，所以默认会显示左边的红色按钮。这段 JS 代码在页面加载时，自动将滚动条位置设置到中间元素的位置，确保用户一开始看到的是正常内容，而不是操作按钮。（注：视频中是说在 Safari 上的位置）

视频讲解在这里

这种方式比传统的监听 touchmove 事件来计算位移要流畅得多，因为滚动是在合成线程上处理的。

Refs:
1. Practical CSS Scroll Snapping
2. CSS scroll snap
3. https://web.dev/articles/rendering-performance#3_js_css_style_composite

codepen.io

Swiper

...