如何实现未点击#left div时，用空格/方向键滚动该div？

嘿，这个需求我之前做后台系统时也碰到过，核心思路就是监听全局键盘事件，把空格、上下箭头、翻页键的操作直接映射到#left这个div的滚动上，同时得阻止浏览器默认的页面滚动行为，不然会出现页面和div一起滚动的尴尬情况。

步骤1：先让目标Div具备滚动条件 #

首先得给#left设置合适的样式，确保它能产生可滚动的区域：

#left {
  /* 必须设置固定高度/最大高度，超出才会出现滚动条 */
  height: 600px;
  /* 垂直方向超出时显示滚动条 */
  overflow-y: auto;
  /* 可选：美化滚动条样式 */
  /* scrollbar-width: thin; */
}

步骤2：编写键盘事件监听代码 #

接下来用JavaScript监听全局的键盘按下事件，根据不同按键控制#left的滚动逻辑：

// 获取目标滚动容器
const leftScrollContainer = document.getElementById('left');

// 定义滚动步长，可根据需求调整
const arrowScrollStep = 40; // 上下箭头每次滚动40px
const pageScrollStep = leftScrollContainer.clientHeight * 0.8; // 翻页键滚动80%可视高度

// 监听全局键盘按下事件
document.addEventListener('keydown', (event) => {
  // 先判断容器是否有可滚动的内容
  const hasScrollContent = leftScrollContainer.scrollHeight > leftScrollContainer.clientHeight;
  if (!hasScrollContent) return; // 没有滚动内容就保留默认行为

  switch(event.key) {
    // 空格：默认向下翻页
    case ' ':
      leftScrollContainer.scrollTop += pageScrollStep;
      event.preventDefault(); // 阻止页面默认滚动
      break;
    // 向上箭头：向上滚动
    case 'ArrowUp':
      if (leftScrollContainer.scrollTop > 0) {
        leftScrollContainer.scrollTop -= arrowScrollStep;
        event.preventDefault();
      }
      break;
    // 向下箭头：向下滚动
    case 'ArrowDown':
      const maxScrollTop = leftScrollContainer.scrollHeight - leftScrollContainer.clientHeight;
      if (leftScrollContainer.scrollTop < maxScrollTop) {
        leftScrollContainer.scrollTop += arrowScrollStep;
        event.preventDefault();
      }
      break;
    // PageUp：向上翻页
    case 'PageUp':
      const newTopUp = leftScrollContainer.scrollTop - pageScrollStep;
      leftScrollContainer.scrollTop = Math.max(newTopUp, 0); // 避免滚到负数
      event.preventDefault();
      break;
    // PageDown：向下翻页
    case 'PageDown':
      const newTopDown = leftScrollContainer.scrollTop + pageScrollStep;
      leftScrollContainer.scrollTop = Math.min(newTopDown, maxScrollTop); // 避免超出最大滚动值
      event.preventDefault();
      break;
    // 其他按键不处理，保留默认行为
    default:
      break;
  }
});

关键细节说明 #

• 阻止默认行为：一定要调用event.preventDefault()，不然浏览器会同时触发页面本身的滚动（比如按空格页面会向下跳），和div的滚动冲突。
• 滚动边界判断：代码里加入了顶/底部的判断，当div已经无法再滚动时，会保留按键的默认行为（比如div滚到底部后，按向下箭头页面会继续滚动），你也可以根据需求去掉这个判断，强制所有按键都只作用于div。
• 步长自定义：arrowScrollStep和pageScrollStep可以根据你的UI设计调整数值，比如把翻页步长改成100%可视高度。

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