不同浏览器按键行为差异原因及Chrome ArrowUp/ArrowDown失效问题

你的代码在Safari正常但Chrome失效，核心原因是浏览器默认滚动行为干扰，加上事件绑定方式的稳定性问题。Chrome按下箭头键时会优先触发页面默认滚动，直接覆盖你的自定义逻辑；同时直接赋值document.onkeydown容易被其他脚本意外覆盖，可靠性不如标准事件监听。

以下是修正后的代码：

let currentPiece = "p1";
const pieces = ["p1", "p2", "p3", "p4", "p5"];

// 改用addEventListener绑定事件，避免被其他脚本覆盖
document.addEventListener('keydown', function(e) {
  const key = e.key;
  
  if (key === "ArrowUp" || key === "w" || key === "W") {
    e.preventDefault(); // 阻止浏览器默认滚动行为，避免冲突
    const currentIndex = pieces.indexOf(currentPiece);
    if (currentIndex === -1) return; // 避免currentPiece不在数组中的异常
    currentPiece = currentIndex === 0 ? pieces[pieces.length - 1] : pieces[currentIndex - 1];
    document.getElementById(currentPiece).scrollIntoView({ behavior: 'smooth' });
  } else if (key === "ArrowDown" || key === "s" || key === "S") {
    e.preventDefault(); // 阻止浏览器默认滚动行为
    const currentIndex = pieces.indexOf(currentPiece);
    if (currentIndex === -1) return;
    currentPiece = currentIndex === pieces.length - 1 ? pieces[0] : pieces[currentIndex + 1];
    document.getElementById(currentPiece).scrollIntoView({ behavior: 'smooth' });
  }
});

额外注意事项：

• 如果页面中有输入框、文本域等可聚焦元素，这些元素会优先捕获按键事件，导致箭头键逻辑失效。必要时可给这些元素添加keydown事件，在箭头键触发时放行事件。
• 测试时可在控制台打印e.key，确认Chrome是否正确识别箭头键的取值（正常应为ArrowUp/ArrowDown）。
• 你之前用keyCode出现的定位错误，本质也是默认滚动行为和自定义逻辑冲突，添加e.preventDefault()即可解决。

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