自学JavaScript：通过数组操作移动div实现Netflix式左右切换菜单失败求助

现有代码核心错误 #

• 语法错误：数组长度调用错误
  数组的length是属性而非方法，menuBar.length()需修改为menuBar.length，错误调用会直接抛出异常，阻断后续代码执行。
• 结构逻辑错误：键盘事件绑定逻辑错误
  按键判断逻辑写在了一次性执行的for循环中，该循环仅会在代码初始化时运行一次，后续按下按键不会触发对应逻辑。正确做法是单独绑定keydown事件监听器监听按键动作。
• 索引越界问题：未做边界防护
  直接对索引变量i做自增自减操作，未限制取值范围，当i小于0或大于等于数组长度时，访问menuBar[i]会得到undefined，后续操作会直接报错。
• 位移逻辑错误
  现有GoThroughMenu仅修改了block1的位置，未处理其他菜单块；且直接读取style.left只能拿到元素行内样式值，若你通过CSS类设置定位属性，此处读取结果为空，自然无位移效果。同时你的逻辑是将block1的位置改为其他元素的位置，完全不符合滚动切换的需求，你需要的是统一偏移所有菜单块的位置，而非单个块赋值。
• 定位属性缺失
  要让left/top属性生效，所有block元素必须提前设置position为relative/absolute/fixed，默认的static定位下偏移属性完全不生效。

简化实现示例 #

// 初始化参数
const menuBar = [block1, block2, block3, block4];
let currentIndex = 0;
// 单个菜单块的宽度+间隙，根据实际样式调整
const blockTotalWidth = 220;

// 绑定键盘事件
document.addEventListener('keydown', e => {
  if (e.key === 'ArrowLeft') {
    currentIndex = Math.max(0, currentIndex - 1);
    updateMenuOffset();
  } else if (e.key === 'ArrowRight') {
    // 边界判断：最多可滚动到最后一个块对齐左侧的位置
    currentIndex = Math.min(menuBar.length - 1, currentIndex + 1);
    updateMenuOffset();
  }
})

function updateMenuOffset() {
  const offsetX = -currentIndex * blockTotalWidth;
  // 用transform实现位移性能更高，无需触发重排
  menuBar.forEach(block => {
    block.style.transform = `translateX(${offsetX}px)`;
  })
}

提示：建议将所有菜单块放在同一个父容器内，给父容器设置overflow: hidden，超出可视范围的内容会自动隐藏，更符合Netflix菜单的呈现效果。

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