如何在固定元素动画后恢复relative定位，修复滚动异常

• 核心问题是第二个动画播放时修改了元素定位（比如设为fixed）并可能限制了页面滚动，动画结束后未恢复这些设置，导致后续滚动和显示异常。

具体修复步骤： #

1. 恢复元素定位
   在第二个GSAP时间线的完成回调中，将目标元素的position设回relative：

   const tl2 = gsap.timeline({
     onComplete: () => {
       // 替换成你设置过fixed的目标元素选择器
       gsap.set('section.section-2', { position: 'relative' });
     }
   });
   

2. 恢复页面滚动权限
   如果动画过程中设置了body或容器的overflow:hidden，需在回调中恢复：

   const tl2 = gsap.timeline({
     onComplete: () => {
       gsap.set('section.section-2', { position: 'relative' });
       // 恢复body的垂直滚动
       document.body.style.overflowY = 'auto';
     }
   });
   

3. 移除滚动阻止事件
   若动画播放时添加了阻止滚动的监听事件，动画结束后必须移除：

   // 先定义阻止滚动的函数
   function blockScroll(e) {
     e.preventDefault();
   }
   
   // 动画开始时添加监听
   window.addEventListener('wheel', blockScroll, { passive: false });
   
   // 在时间线完成回调中移除监听
   const tl2 = gsap.timeline({
     onComplete: () => {
       gsap.set('section.section-2', { position: 'relative' });
       document.body.style.overflowY = 'auto';
       window.removeEventListener('wheel', blockScroll);
     }
   });
   

4. 检查遮罩层状态
   确认动画结束后，文本的遮罩元素未被错误设置为隐藏或定位异常，可在回调中重置遮罩的相关样式：

   gsap.set('.mask-element', { x: 0, opacity: 1 }); // 根据你的遮罩逻辑调整
   

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