React滚动驱动的滑块淡入淡出动画不流畅该如何优化？

原有实现的核心问题 #

• 仅绑定wheel事件，仅响应滚轮操作，拖动滚动条、触摸滑动等滚动场景完全不触发动画，会出现卡顿断层
• 固定步长修改透明度，和滚动速度、滚动距离完全脱节，不同输入设备（鼠标/触摸板）的deltaY数值差异大，导致动画速度不稳定、上下滚动速度不对称
• 没有做透明度边界限制，数值会溢出0-1的合法范围
• 无css过渡兜底，数值变化时容易出现跳帧

优化实现步骤 #

1. 给滑块添加过渡样式 #

在滑块的css规则中添加过渡属性，兜底保证动画顺滑：

.slider {
  /* 保留原有样式，新增如下规则 */
  transition: opacity 0.15s ease-out;
}

2. 替换事件绑定和动画逻辑 #

删除原有wheel事件绑定、固定步长修改透明度的逻辑，改为绑定scroll事件，基于滚动位置直接计算透明度，和滚动进度完全绑定：

// 可以删除原有countRefOpacity相关代码
useEffect(() => {
  const handleScroll = () => {
    if (!pan.current || !slider.current) return;
    const threshold = pan.current.offsetTop * 2;
    const scrollY = window.scrollY;
    // 淡入淡出需要的滚动距离，数值越大动画越慢，可自行调整
    const fadeRange = 220;
    let opacity;
    if (scrollY >= threshold) {
      // 向下滚动超出阈值，计算淡出进度
      opacity = 1 - (scrollY - threshold) / fadeRange;
    } else {
      // 向上滚动低于阈值，计算淡入进度
      opacity = 1 - (threshold - scrollY) / fadeRange;
    }
    // 限制透明度在合法范围
    opacity = Math.max(0, Math.min(1, opacity));
    slider.current.style.opacity = opacity;
  };
  window.addEventListener("scroll", handleScroll);
  // 初始化时执行一次，避免刷新后状态错误
  handleScroll();
  return () => {
    window.removeEventListener("scroll", handleScroll);
  };
}, []);

效果调整说明 #

需要修改淡入淡出速度时，直接调整fadeRange的数值即可：

• 数值越大，完成动画需要滚动的距离越长，动画越平缓
• 数值越小，完成动画需要滚动的距离越短，动画越快
  优化后动画和滚动进度完全绑定，上下滚动的动画速度对称，所有滚动场景都能触发，流畅度会完全匹配需求。

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