CSS 滚动驱动动画 scroll-timeline ( scroll-timeline-name ❤️ scroll-timeline-axis )

scroll-timeline ( scroll-timeline-name ❤️ scroll-timeline-axis )

scroll() 的最后我们遇到了因为定位问题导致滚动效果失效的情况, 当然 CSS 允许我们手动指定滚动容器, 也就是哪个容器来提供 scroll progress timeline. 我们需要在提供时间线的滚动容器上声明 scroll-timeline 属性.

再次重温 scroll progress timeline, 这个时间线(timeline)是通过滚动容器(scroller)上下或左右方向的滚动推进的. 开始滚动的位置表示时间线处在 0%, 滚动结束的位置表示时间线 100%. 如果 0%100% 的位置相同, 比如容器根本不滚动, 那么时间线不会推动.

解决问题

下面的代码是不生效, 原因很简单, 当 scroll() 采用默认值时, 其第一个默认参数是 nearest, 这时就会寻找离当前元素最近的父级滚动元素. 你可能以为是 .scroll, 但实际上不是.

因为在寻找滚动元素的时候需要这个滚动元素能够影响当前元素的位置和大小, 又因为当前元素的 positionabsolute, 所以可以影响其位置和大小的元素要么是 body, 要么是 positionstatic 的元素. 换言之, 最终找到的就是 .relative, 而 .relative 根本不会滚动, 所以我们不论怎么滑动 .scroll 都不会看到任何变化.

html 复制代码
<div class="relative">
  <div class="scroll">
    <div class="absolute"></div>
  </div>
</div>
css 复制代码
.relative {
  position: relative;
}
.absolute {
  position: absolute;
  animation: bg-color linear;
  animation-timeline: scroll();
}

修改之后

css 复制代码
.scroll {
  scroll-timeline: --youHaveToBeThis;
}
.absolute {
  /* animation-timeline: scroll(); */
  animation-timeline: --youHaveToBeThis;
}

语法

animation-timeline 实际上包括 animation-timeline-nameanimation-timeline-axis 的简写属性, 后者是可选的.

如果同时制定两个值, 那么顺序一定是先 animation-timeline-nameanimation-timeline-axis

animation-timeline-name

  • none: 没有名字
  • 自定义名称: 其定义名称必须以 -- 开头. 这样可以避免与 CSS 关键字冲突.

animation-timeline-axis

可选的值是 block(默认值), inline, y, x, 具体的意思可以参考 scroll().

如果滚动容器在 animation-timeline-axis 方向上没有内容溢出, 或者溢出被隐藏, 那么将不会创建对应的时间线

谢谢你看到这里😊

相关推荐
江号软件分享40 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
Liudef067 小时前
儿童趣味记忆配对游戏
css·游戏·css3
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4539 小时前
React移动端开发项目优化
前端·react.js·前端框架