Skrollr插件移动端滚动修复后桌面端固定元素失效求助

我之前也踩过这个一模一样的坑！skrollr的skrollr-body机制确实容易在移动端和桌面端的滚动逻辑上产生冲突，给你几个亲测有效的解决方案，按优先级尝试：

1. 调整DOM结构：把固定元素移到skrollr-body外部 #

这是最直接且无副作用的方案，核心原理是避开transform对fixed定位的影响：
skrollr会给skrollr-body容器应用transform属性实现视差效果，而根据CSS规范，带有transform的父元素会成为内部fixed元素的定位上下文（不再是视口），所以固定元素会跟着容器滚动。

修改结构前：

<body>
  <div id="skrollr-body">
    <!-- 固定元素被包含在skrollr-body内，导致桌面端失效 -->
    <header class="fixed-header">页面头部横幅</header>
    <!-- 其他视差滚动内容 -->
    <section class="parallax-section">...</section>
  </div>
</body>

修改结构后：

<body>
  <!-- 固定元素放在skrollr-body外面，脱离transform影响 -->
  <header class="fixed-header">页面头部横幅</header>
  <div id="skrollr-body">
    <!-- 仅放置需要视差滚动的非固定内容 -->
    <section class="parallax-section">...</section>
  </div>
</body>

这样移动端依然能通过skrollr-body正常滚动，桌面端的固定元素也能保持相对于视口的定位。

2. 修改skrollr初始化配置，关闭强制高度计算 #

如果固定元素必须放在skrollr-body内部，可以通过调整skrollr的核心配置来解决：
skrollr默认开启forceHeight: true，会强制把body的高度设为skrollr-body的高度，导致桌面端的滚动逻辑被替换为容器内部滚动。关闭这个选项后，桌面端会恢复正常的body滚动，fixed元素的定位逻辑也会回归正常。

初始化代码修改为：

skrollr.init({
  mobileDeceleration: 0.004, // 保持移动端滚动的流畅性
  forceHeight: false, // 关闭强制高度计算，恢复桌面端原生滚动
  smoothScrolling: true, // 可选，根据需求保留或关闭平滑滚动
  edgeStrategy: 'set' // 可选，处理滚动边界的策略
});

注意：关闭forceHeight后，需要确保你的页面内容高度能正常撑开body，避免出现滚动异常。

3. 针对固定元素添加CSS修复（兜底方案） #

如果以上两种方案都无法实施，可以尝试给固定元素添加额外的CSS规则，强制其定位上下文为视口：

.fixed-header {
  position: fixed !important;
  z-index: 9999; // 确保元素在最上层
  transform: translateZ(0); // 创建独立层叠上下文，部分场景下可规避父元素transform的影响
}

不过这个方案的兼容性可能不如前两种，仅作为兜底尝试。

内容的提问来源于stack exchange，提问作者signinginagain