data-uk-gridparallax 是 UIKit 专为 uk-grid 设计的轻量级滚动位移组件，仅作用于带 uk-width-* 类的子项，通过 translateY() 实现列间速度差异；需单独引入 grid-parallax.js、确保结构规范且页面可滚动，不支持多层纵深或背景图固定。
UIKit 的 data-uk-gridparallax 是什么，能直接用吗？
它不是通用视差方案，而是专为网格（uk-grid）设计的轻量级滚动位移控制组件。只作用于带 uk-width-* 类的子项，不接管背景图、不处理 z 轴深度，本质是监听 scroll 后对每个网格项做 transform: translateY() 偏移。
如果你的结构是标准 UIKit 网格，且只需要「列之间滚动速度略有差异」的轻微视差感，它开箱即用；但想做多层纵深（前景/中景/背景）、或控制背景图固定，这个组件完全不适用。
为什么加了 data-uk-gridparallax 却没效果？
常见原因有三个：
- 没引入
grid-parallax.js—— 它不在 UIKit 核心包里，必须单独加载，路径通常是js/components/grid-parallax.js - 网格容器没加
uk-grid类，或子项缺失uk-width-*（比如用了uk-width-1-2但写成了uk-width-1/2） - 页面高度不足导致滚动事件未触发，
grid-parallax默认只在有实际滚动时才激活，可临时加style="height: 200vh;"测试
注意：该组件默认 translate 值是 150，单位是像素，不是百分比。设成负值会让元素向上偏移更快，正向则滞后。
data-uk-gridparallax 和纯 CSS background-attachment: fixed 能混用吗？
能，但要小心层级和定位冲突。grid-parallax 只动网格项的 transform，而 background-attachment: fixed 依赖元素自身定位上下文；若网格项设置了 position: relative（UIKit 默认会加），它的 fixed 背景就相对于自己而非视口，效果失效。
解决办法只有两个：
- 把背景图提到网格容器上，用
uk-grid容器设background-attachment: fixed，网格项保持透明内容 - 放弃 fixed，改用
grid-parallax控制多个网格项分别模拟不同层（例如第一列设translate: 50，第二列设translate: 120），靠视觉错觉凑出层次
移动端滑动卡顿，grid-parallax 有性能优化建议吗？
有，而且很关键：
- 必须给所有参与视差的网格项加
will-change: transform，否则 iOS Safari 会频繁重绘 - 避免在
translate值里用小数（如150.3），UIKit 内部用Math.round()处理，但部分 Android WebView 对 subpixel 渲染仍不友好 - 不要给整个网格容器加
overflow: hidden，这会禁用硬件加速，改成用clip-path或父容器裁剪更稳妥 - 如果只是想让某几列“慢一点”，其实用 CSS
@keyframes+scroll-timeline更省资源，但兼容性限于 Chrome 115+ 和 Safari 17.4+
真正难调的不是参数，而是当页面同时存在 UIKit 的 uk-sticky、uk-scrollspy 和 grid-parallax 时，它们共享同一个 scroll listener，容易互相干扰 offset 计算 —— 这时候得手动解耦，用原生 requestAnimationFrame + getBoundingClientRect() 重写滚动逻辑。
立即学习“前端免费学习笔记（深入）”；
