requestAnimationFrame在Edge中失效：平滑滚动脚本故障排查求助

看起来你遇到了旧版Edge里平滑滚动脚本失效的棘手问题——明明控制台能看到滚轮移动量计算正常，但页面就是纹丝不动。我之前也碰到过类似的Edge兼容性问题，给你梳理下问题根源和修复方案：

问题根源分析 #

Edge（尤其是基于EdgeHTML内核的旧版）对页面滚动容器的处理和其他浏览器存在差异：

• 其他浏览器通常用document.documentElement（即<html>元素）作为滚动容器，但旧版Edge有时会把滚动行为绑定到document.body上
• 原生滚轮事件的默认行为在Edge里可能无法被正确阻止，导致自定义滚动动画被覆盖
• 脚本里的目标元素选择逻辑没有适配Edge的特殊情况

具体修复步骤 #

1. 统一滚动目标元素 #

替换原来的目标元素判断逻辑，用标准的document.scrollingElement来获取当前页面的滚动容器，它会自动适配不同浏览器（包括Edge）：

if (target == document) {
  // 优先用标准属性， fallback到html或body
  target = document.scrollingElement || document.documentElement || document.body;
}

针对旧版Edge，还可以加个额外判断强制使用document.body：

var isOldEdge = /Edge\/\d+/i.test(navigator.userAgent);
if (isOldEdge) {
  target = document.body;
}

2. 正确阻止原生滚动行为 #

在监听滚轮事件时，必须设置passive: false才能让preventDefault()生效，否则Edge会忽略阻止默认行为的请求：

target.addEventListener('wheel', function(e) {
  e.preventDefault(); // 阻止原生滚动，避免和自定义动画冲突
  // 你的滚轮移动量计算逻辑...
}, { passive: false });

3. 调整平滑滚动的动画逻辑 #

确保动画基于滚动容器的scrollTop属性进行更新，同时限制滚动范围避免超出页面边界：

function animateScroll(targetY) {
  var diff = targetY - currentY;
  currentY += diff * smooth / 100;
  
  // 限制滚动在页面范围内
  currentY = Math.max(0, Math.min(currentY, target.scrollHeight - target.clientHeight));
  
  target.scrollTop = currentY;
  
  if (Math.abs(diff) > 0.5) {
    requestAnimationFrame(() => animateScroll(targetY));
  } else {
    moving = false;
  }
}

修复后的完整代码示例 #

new SmoothScroll(document, 120, 12);

function SmoothScroll(target, speed, smooth) {
  // 适配不同浏览器的滚动容器
  if (target == document) {
    target = document.scrollingElement || document.documentElement || document.body;
  }

  // 旧版Edge特殊处理
  var isOldEdge = /Edge\/\d+/i.test(navigator.userAgent);
  if (isOldEdge) {
    target = document.body;
  }

  var moving = false;
  var currentY = target.scrollTop;

  // 监听滚轮事件，阻止原生滚动
  target.addEventListener('wheel', function(e) {
    e.preventDefault();
    // 统一滚轮方向（不同浏览器delta值正负可能相反）
    var deltaY = e.deltaY || e.wheelDeltaY;
    deltaY = deltaY > 0 ? 1 : -1;

    var targetY = currentY + deltaY * speed;

    if (!moving) {
      moving = true;
      animateScroll(targetY);
    }
  }, { passive: false });

  // 平滑滚动动画
  function animateScroll(targetY) {
    var diff = targetY - currentY;
    currentY += diff * smooth / 100;

    // 限制滚动范围
    currentY = Math.max(0, Math.min(currentY, target.scrollHeight - target.clientHeight));

    target.scrollTop = currentY;

    if (Math.abs(diff) > 0.5) {
      requestAnimationFrame(() => animateScroll(targetY));
    } else {
      moving = false;
    }
  }
}

这个版本的脚本应该能在IE11、新旧版Edge以及其他主流浏览器里正常工作了，你可以测试下效果。

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