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>

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

兼容性

兼容性不错

谢谢你看到这里😊

相关推荐
我要洋人死8 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人20 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人21 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR26 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香28 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969331 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai36 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
冷眼Σ(-᷅_-᷄๑)2 小时前
WPF缩放动画和平移动画叠加后会发生什么?
wpf·动画
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍