React JS中如何实现滚轮触发的图片缩放效果（仿mrpops.ua）

先说说你之前方案的问题 #

用计数器+switch case的方式太生硬——滚动是连续的行为，计数器的离散数值没法匹配滚动的连续变化，很容易出现动画触发不精准、卡顿跳变的问题，没法实现目标网站那种顺滑的跟随效果。

推荐的实现思路 #

• 基于滚动距离的连续计算：放弃计数器，直接监听scroll事件获取window.scrollY（当前滚动距离），以此计算图片的缩放比例。比如设定一个滚动阈值（比如0-600px），用scrollY / 阈值得到0-1的系数，再用这个系数算出缩放值（比如1 - 系数*0.3，对应从1缩放到0.7），让缩放完全跟随滚动进度走。
• 用CSS变量联动样式：把计算好的缩放比例赋值给CSS变量（比如--scale-value），在CSS里直接写transform: scale(var(--scale-value))，比直接操作DOM样式更高效，也方便结合过渡效果。
• 添加顺滑过渡：给图片的transform属性加transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)（曲线和时长可按需调整），让缩放过程更自然；如果需要特定动画曲线，也可以用@keyframes，但连续滚动场景下过渡比关键帧动画更适配。
• 节流优化性能：滚动事件触发频率极高，给事件处理函数加节流（比如每16ms触发一次，和屏幕刷新率同步），避免频繁计算导致页面卡顿。
• 边界值限制：计算缩放比例时用Math.min()和Math.max()锁定范围，比如最小缩放到0.7，最大保持1，防止滚动超出阈值后图片继续异常缩放。

简单示例代码 #

CSS

.header-img {
  --scale: 1;
  transform: scale(var(--scale));
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

JS

const headerImg = document.querySelector('.header-img');
const scrollThreshold = 600; // 滚动600px完成缩放

function handleScroll() {
  const scrollY = window.scrollY;
  // 计算缩放比例，限制在0.7-1之间
  const scale = Math.max(1 - (scrollY / scrollThreshold), 0.7);
  headerImg.style.setProperty('--scale', scale);
}

// 节流函数
function throttle(func, delay) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  }
}

window.addEventListener('scroll', throttle(handleScroll, 16));

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