如何实现网页固定文本块视差滚动效果及问题排查

1. 修复滚动完成后主页面无法滚动的问题 #

问题根源是滚动触发阶段给页面添加了滚动锁定，但动画结束后未正确解除限制。修改JS逻辑，在文本区块滚动动画完成后恢复body的滚动状态：

// 滚动动画完成时执行的解除锁定逻辑
function unlockPageScroll() {
  // 清除body上的滚动锁定样式
  document.body.style.position = '';
  document.body.style.overflow = '';
  document.body.style.top = '';
  
  // 还原之前记录的页面滚动位置
  const savedScrollPos = parseInt(document.body.dataset.savedScroll || '0');
  window.scrollTo(0, savedScrollPos);
  delete document.body.dataset.savedScroll;
}

// 触发文本区块滚动前，先锁定页面并记录当前滚动位置
function lockPageForTextScroll() {
  const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
  document.body.dataset.savedScroll = currentScroll;
  document.body.style.position = 'fixed';
  document.body.style.overflow = 'hidden';
  document.body.style.top = `-${currentScroll}px`;
  
  // 此处执行你的文本区块滚动动画逻辑
}

2. 优化星星图片动画流畅度 #

放弃top/left这类会触发浏览器重排的属性，改用transform实现动画并开启硬件加速：

.star {
  /* 移除原有的top/left过渡动画 */
  /* top: 0; left: 0; transition: top 2s, left 2s; */
  
  /* 使用transform实现动画，触发GPU加速 */
  transform: translate(0, 0);
  transition: transform 2s ease-out;
  will-change: transform; /* 提前告知浏览器准备动画资源 */
  backface-visibility: hidden; /* 优化渲染性能 */
}

.star.active {
  /* 用transform替代top/left定位 */
  transform: translate(150px, 200px); /* 按需求调整目标位置 */
}

同时尽量通过CSS类切换控制动画，避免在动画过程中频繁修改DOM样式，减少不必要的重绘重排。

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