background-attachment: fixed 在移动端（尤其 Safari）被忽略，且受 transform、will-change 等属性影响失效；Less 仅是预处理器，无法解决底层兼容性问题，只能通过变量和条件规则封装视差结构并配合 JS 实现 fallback。
为什么直接用 background-attachment: fixed 在 Less 中不管用
因为视差滚动不是靠单个 CSS 声明就能生效的——background-attachment: fixed 在移动端几乎被浏览器忽略（尤其 Safari），且在容器有 transform、will-change 或滚动容器为非 body 时会失效。Less 只是预处理器，它不改变浏览器渲染逻辑，所以“封装变量”解决不了底层兼容性问题，只能帮你结构化写法。
如何用 Less 封装可复用的视差背景类（含 fallback）
核心是分层控制：固定背景图 + 滚动容器位移模拟视差。Less 的作用是统一管理图片路径、位移比例、断点适配。以下是最简实用封装：
-
@parallax-bg-url：声明为变量，避免硬编码路径，例如@parallax-bg-url: url("/img/hero-bg.jpg"); -
@parallax-speed：定义位移系数（如0.3），值越小，背景滚动越慢，视差感越强 - 必须配合
transform: translateY()动态计算，不能只靠 background-attachment - 为移动端加
@supports (background-attachment: fixed)条件包裹，否则 Safari 直接跳过
.parallax-section {
position: relative;
overflow: hidden;
height: 100vh;
<p>&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200%;
background-image: @parallax-bg-url;
background-size: cover;
background-position: center center;
z-index: -1;</p><pre class="brush:php;toolbar:false;">@supports (background-attachment: fixed) {
background-attachment: fixed;
height: 100%;
}}
// 滚动监听后 JS 注入的 class，用于 fallback &.js-parallax { &::before { background-attachment: scroll; transform: translateY(calc(var(--y, 0px) * @parallax-speed)); } } }
Less 变量命名与 JS 协作的关键细节
视差效果实际依赖 JS 读取滚动位置并更新 --y 自定义属性，Less 里必须预留接口：
- 不要把
@parallax-speed写死在选择器里，应导出为 CSS 自定义属性，例如：:root { --parallax-speed: 0.3; } - JS 中通过
getComputedStyle(document.documentElement).getPropertyValue('--parallax-speed')读取，保证样式与逻辑同步 - 如果多个区块用不同速度，建议用
[data-parallax-speed="0.15"]这类属性选择器，Less 里用[data-parallax-speed]::before配合attr()不现实，应改用 JS 动态设style - 注意：Less 无法运行时读取滚动值，所有「动态」部分必须交由 JS 完成，Less 只管静态结构和变量契约
移动端真机调试最容易漏掉的三件事
iOS Safari 对 background-attachment: fixed 的限制极严，光靠 Less 变量封装毫无意义，必须实测：
- 禁用
overscroll-behavior: contain—— 它会截断父容器的滚动事件，导致 JS 无法监听到视差所需的scroll，进而 fallback 失效 - 确保视差容器没有
transform: translateZ(0)或will-change: transform，这两者会让 Safari 强制关闭 fixed 背景 - 使用
passive: false绑定 scroll 事件（尤其 iOS），否则preventDefault()会被静默忽略，视差位移卡顿
变量封装再整齐，没绕过这些底层限制，页面一上真机就平铺不动。Less 是组织工具，不是魔法棒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
