CSS 滚动捕获 scroll-snap-type

  • scroll-snap-type
    • 语法
    • 实例
      • [捕获轴 y 捕获严格程度 mandatory](#捕获轴 y 捕获严格程度 mandatory)
      • [捕获轴 y 捕获严格程度 proximity](#捕获轴 y 捕获严格程度 proximity)
      • [同理看下捕获轴 x](#同理看下捕获轴 x)
    • 一些注意事项
    • 兼容性

scroll-snap-type

用来指定一个滚动容器(scroll container)是否是滚动捕获容器(scroll snap container)、捕获的严格程度以及在什么方向上执行捕获.

具体捕获的动画或物理效果不是由 scroll-snap-type 决定, 而是由浏览器决定.

💡建议先读这个名词介绍

语法

scroll-snap-type 的内容由两部分组成, 滚动捕获轴和滚动捕获严格程度

  • 滚动捕获轴:
    • x: 滚动容器仅捕获水平轴上的滚动位置(snap position, 解释参考名词介绍)
    • y: 滚动容器仅捕获垂直轴上的滚动位置.
    • block: 滚动容器仅捕获逻辑块轴上的滚动位置.
    • inline: 滚动容器仅捕获逻辑水平轴上的滚动位置.
    • both: 滚动容器捕获两个轴上的滚动位置, 每个轴上捕获的元素可能不同
  • 滚动捕获严格程度:
    • none: (默认值). 不捕获
    • mandatory: 如果用户没有滚动操作时, 滚动容器必须捕获到一个滚动位置(snap position). 如果存在有效的捕获位置, 滚动容器必须在滚动停止时捕获.
    • proximity: 滚动容器可能会在滚动停止时捕获到一个滚动位置, 这取决于浏览器设定的滚动参数.

实例

捕获轴 y 捕获严格程度 mandatory

html 复制代码
<div class="container y-mandatory">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
css 复制代码
.container {
  height: 200px;
  width: 300px;
  border: 1px solid #121212;
  overflow: auto;
}
.container div {
  height: 100%;
  scroll-snap-align: center;
}
.y-mandatory {
  scroll-snap-type: y mandatory;
}

先暂停一下看看 CSS, 首先我们要给滚动容器设置 scroll-snap-type: y mandatory; 这样滚动容器就变成了滚动捕获容器, 单单这样还不行因为 scroll-snap-align 的默认值为 none, 这里先设置为 center 有个滚动效果, 后面会详细介绍 scroll-snap-align. 另外设置子元素和父元素高度相同

你会发现开发者工具能够识别滚动捕获容器, 并出现 scroll-snap 的标志

如果你点一下这个标志, 浏览器就会展开滚动的内容, 并且用蓝色点表示 scroll-snap-align

下面就看看滚动的效果吧, 我们无法在两个子元素之间停住, 当滚动到某个点时, 最终停在哪个元素(或最终捕捉到哪个元素)也是浏览器决定的.

捕获轴 y 捕获严格程度 proximity

css 复制代码
.y-proximity {
  scroll-snap-type: y proximity;
}

你会看到, 我们可以明确在两个子元素之间停住, 就像定义中说的那样, 当滚动行为停止后, 是否发生捕获是根据浏览器的参数决定的.

同理看下捕获轴 x

先来捕获严格程度 mandatory

再来捕获严格程度 proximity

一些注意事项

我们前面展示的内容, 每个子元素都和父元素同高, 假如某个子元素比父元素高呢?

css 复制代码
.first-tall div:first-of-type {
  height: 200%;
  position: relative;
}
.first-tall div:first-of-type::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 50%;
  outline: 5px dashed black;
}
html 复制代码
<div class="container first-tall y-mandatory">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

对于内容过长的元素, 滑动到其最底端之前都不会出现捕获.

兼容性

兼容性不错

谢谢你看到这里😊

相关推荐
庸俗今天不摸鱼31 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下38 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei2 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码2 小时前
Spring Task 定时任务
java·前端·spring