如何使用JavaScript降低Microsoft Edge浏览器的滚动速度？

在Microsoft Edge浏览器中，按住arrow down键滚动页面时速度极快。尽管Edge基于Chromium内核，但Google Chrome不存在此问题。

我们用250段Lorem Ipsum文本做了测试：

• Chrome中，每秒仅滚动几段内容
• Edge中，每秒可滚动数十段

这种上下方向键的滚动体验在我们网站的Edge环境中极差，请问如何使用JavaScript控制网站在Microsoft Edge中的滚动速率？

Edge效果：

Chrome效果：

解决方案 #

可以通过监听键盘事件，覆盖浏览器默认滚动行为，自定义滚动步长和间隔来控制速率：

let scrollInterval;
const scrollStep = 50; // 每次滚动的像素距离，数值越小滚动越慢
const scrollDelay = 100; // 滚动间隔（毫秒），数值越大滚动越慢

document.addEventListener('keydown', (e) => {
  // 仅针对Edge浏览器的上下方向键生效
  if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && navigator.userAgent.includes('Edg')) {
    e.preventDefault(); // 阻止浏览器默认滚动逻辑
    
    // 清除已有定时器，避免重复触发
    if (scrollInterval) clearInterval(scrollInterval);
    
    // 设置定时滚动
    scrollInterval = setInterval(() => {
      window.scrollBy({
        top: e.key === 'ArrowDown' ? scrollStep : -scrollStep,
        behavior: 'auto' // 如需平滑滚动可改为'smooth'，但会弱化速率控制效果
      });
    }, scrollDelay);
  }
});

document.addEventListener('keyup', (e) => {
  // 松开方向键时停止滚动
  if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && scrollInterval) {
    clearInterval(scrollInterval);
    scrollInterval = null;
  }
});

代码说明 #

• 通过navigator.userAgent.includes('Edg')限定仅在Edge中应用该逻辑，不干扰其他浏览器的正常滚动
• scrollStep和scrollDelay可根据需求调整，组合控制最终滚动速率
• 监听keyup事件清除定时器，确保松开按键后立即停止滚动

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