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>

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

兼容性

兼容性不错

谢谢你看到这里😊

相关推荐
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic4 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā4 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727576 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架