Locomotive Scroll回滚到顶部时header不显示（CSS opacity为1）

• 核心为GPU合成层渲染时序异常：Locomotive Scroll 实现平滑滚动时会给滚动容器、带data-scroll属性的元素自动添加transform: translate3d()、will-change: transform属性，强制元素提升到GPU独立合成层渲染。滚动回顶的瞬间合成层更新出现断层，浏览器未触发对应区域的重绘，就会出现元素样式属性正常但肉眼不可见的情况。
• 属性配置冲突：你给header同时添加了data-scroll和data-scroll-section两个属性，data-scroll-section为滚动区块父容器专属属性，给单个元素添加会导致Locomotive对该元素的渲染层级计算冲突，进一步提升异常出现概率。

按优先级从高到低尝试以下方案即可：

1. 修正header的属性配置
   移除header元素上的data-scroll-section属性，若不需要给header添加滚动触发的交互动画，可同步移除data-scroll属性，避免多余的渲染层级计算。

2. 添加CSS规则强制header重绘
   给header元素添加以下CSS规则，强制浏览器每次渲染都校验该元素的绘制状态，规避合成层更新异常：

header {
  transform: translateZ(0);
  backface-visibility: hidden;
}

若上述规则无效，可改用低损耗的无限动画强制持续触发重绘：

header {
  animation: forceRepaint 0.001s infinite;
}
@keyframes forceRepaint {
  from { opacity: 0.9999; }
  to { opacity: 1; }
}

3. 调整Locomotive Scroll初始化配置
   添加autoRaf: true参数，强制Locomotive主动触发每一帧的渲染校验，避免滚动结束时的渲染断层：

let options = {
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  getSpeed: true,
  getDirection: true,
  reloadOnContextChange: true,
  autoRaf: true
}
const scroll = new LocomotiveScroll(options);

4. 监听滚动回顶事件主动触发重绘
   如果以上方案均不生效，可监听滚动事件，当检测到滚动到顶部时主动触发一次全局重绘：

scroll.on('scroll', (args) => {
  if (args.scroll.y === 0) {
    void document.body.offsetHeight;
  }
})

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