配置键盘反向滚动：上键向下滚下键向上滚（适配3D导航渐进式滚动）

核心思路拆解 #

首先咱们得把需求拆明白：要做平滑的渐进式页面滚动，还要把方向键的逻辑反过来——按上键向下滚、按向下键向上滚，同时得给后续的3D世界导航留好扩展空间。之前用jQuery试过，现在咱们换成纯JS来实现，灵活性更高。

纯JavaScript分步实现 #

1. 绑定键盘事件，拦截默认行为 #

先给document绑定键盘按下事件，重点监听上/下方向键。这里要注意先阻止浏览器的默认滚动行为，不然咱们的自定义逻辑会被原生滚动覆盖。

document.addEventListener('keydown', function(e) {
  // 只处理上、下方向键
  if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
    e.preventDefault(); // 阻止原生滚动
    // 按上键触发向下滚动，按向下键触发向上滚动
    const scrollDir = e.key === 'ArrowUp' ? 'down' : 'up';
    scrollProgressive(scrollDir);
  }
});

2. 编写渐进式平滑滚动函数 #

渐进式滚动的关键是用requestAnimationFrame分帧调整滚动位置，让滚动过程更丝滑，而不是瞬间跳转到目标点。咱们可以定义一个函数，控制每帧滚动的距离，还能灵活调整速度：

function scrollProgressive(direction) {
  const scrollStep = 12; // 每帧滚动的像素数，数值越大滚动越快
  // 计算目标滚动位置：按整屏来滚动，也可以改成固定距离
  const targetScroll = direction === 'down' 
    ? window.scrollY + window.innerHeight 
    : window.scrollY - window.innerHeight;

  // 用requestAnimationFrame实现平滑动画
  function animateScroll() {
    const currentScroll = window.scrollY;
    const distance = targetScroll - currentScroll;
    // 判断是否还需要继续滚动
    const shouldContinue = direction === 'down' 
      ? currentScroll < targetScroll 
      : currentScroll > targetScroll;

    if (shouldContinue) {
      // 计算下一帧的滚动位置，避免超出目标值
      const nextScroll = currentScroll + Math.sign(distance) * Math.min(Math.abs(distance), scrollStep);
      window.scrollTo(0, nextScroll);
      requestAnimationFrame(animateScroll);
    }
  }

  animateScroll();
}

3. 预留3D世界导航的扩展入口 #

如果后续要加3D导航（比如基于Three.js的场景），可以加一个模式开关，优先处理3D逻辑，再回退到页面滚动：

let is3DModeActive = false; // 控制3D导航模式的开关

document.addEventListener('keydown', function(e) {
  if (is3DModeActive) {
    // 这里写3D导航逻辑，比如移动相机、旋转视角
    if (e.key === 'ArrowUp') {
      console.log('3D场景：相机向前移动');
      // 替换成你的3D操作代码，比如camera.position.z -= 0.1;
    } else if (e.key === 'ArrowDown') {
      console.log('3D场景：相机向后移动');
      // 替换成你的3D操作代码，比如camera.position.z += 0.1;
    }
    e.preventDefault();
  } else {
    // 执行页面滚动逻辑
    if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
      e.preventDefault();
      const scrollDir = e.key === 'ArrowUp' ? 'down' : 'up';
      scrollProgressive(scrollDir);
    }
  }
});

// 示例：用按钮切换3D模式
document.getElementById('toggle3D').addEventListener('click', function() {
  is3DModeActive = !is3DModeActive;
  alert(is3DModeActive ? '已切换到3D导航模式' : '已回到页面滚动模式');
});

关键细节提示 #

• 阻止默认行为很重要：如果不调用e.preventDefault()，浏览器原生的方向键滚动会和咱们的自定义逻辑打架，导致滚动混乱。
• 滚动步长可调整：scrollStep的值可以根据需求改，想要更顺滑就调小，想要更快就调大。
• 兼容性兜底：如果要兼容旧版IE，可以把requestAnimationFrame换成setTimeout(animateScroll, 16)，虽然平滑度会差一点，但基本功能能实现。

简化方案：用CSS辅助平滑滚动 #

如果觉得写JS动画太麻烦，也可以用CSS的平滑滚动属性来简化：

html {
  scroll-behavior: smooth;
}

然后修改滚动函数，直接跳转到目标位置，CSS会自动处理平滑效果：

function scrollProgressive(direction) {
  const targetScroll = direction === 'down' 
    ? window.scrollY + window.innerHeight 
    : window.scrollY - window.innerHeight;
  window.scrollTo({
    top: targetScroll,
    behavior: 'smooth'
  });
}

这种方式更简洁，但缺点是没法精细控制滚动的加速度、减速效果，适合对滚动过程要求不高的场景。

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