页面resize时顶部出现负向偏移 Slider boomerang效果失效怎么办

问题表现 #

开发滑块回旋效果时，执行窗口尺寸调整（resize）操作后，页面顶部会出现额外的负向top偏移，导致效果运行不符合预期。

问题根因 #

原实现逻辑仅在页面初始化、滑块滚动触发时计算容器偏移参数，没有在resize事件触发时重置已有的偏移缓存、重新计算容器基准位置。resize后新旧视口的高度差值会被累计到容器的偏移属性上，多次触发resize后偏移量会持续累加，最终生成异常的负向顶部偏移。

修复步骤 #

• 为window的resize事件绑定专属处理逻辑，事件触发后第一步先清空滑块容器上已写入的内联transform、top偏移样式
• 重置全局缓存的当前偏移量变量为初始值0，避免旧的偏移值参与新尺寸下的计算
• 重新拉取当前视口高度、单个滑块项高度、滑块总高度等核心尺寸参数
• 尺寸参数更新完成后，手动触发一次滑块位置校准逻辑，保证resize后滑块位置和当前滚动位置匹配

核心修复代码参考：

// 防抖工具函数，避免resize时频繁触发计算导致卡顿
function debounce(func, delay = 120) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  }
}

// 绑定resize处理逻辑
window.addEventListener('resize', debounce(() => {
  // 清空已有偏移样式
  sliderWrap.style.transform = `translateY(0)`;
  // 重置偏移缓存值
  currentTranslateY = 0;
  // 重新计算核心尺寸参数
  winH = window.innerHeight;
  itemH = sliderItems[0].offsetHeight;
  totalSliderH = itemH * sliderItems.length;
  // 校准当前滑块位置
  checkSliderPosition();
}));

优化提示：如果原有逻辑是通过监听scroll事件触发滑块位置更新，resize校准完成后可以主动触发一次scroll事件，直接复用原有位置计算逻辑，不用重复编写相同代码。

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