理解键盘事件与页面滚动的关系
键盘事件的触发机制
在浏览器环境中，键盘事件包括 keydown、keypress、keyup 等。当用户按下按键时，浏览器会触发一系列事件，重复按键也可能产生持续触发。掌握这些机制对于实现对页面滚动的精细控制至关重要，因为滚动往往与浏览器的默认行为相互作用。
要实现精准滚动控制，需要理解事件对象中的 e.key、e.code、以及 e.preventDefault() 的作用。某些按键（如 ArrowDown、ArrowUp、PageDown、PageUp、Space）具备内置滚动行为，处理时需要明确是否阻止默认行为。
// 示例：记录最近一次按键及其键名
document.addEventListener('keydown', (e) => {console.log('按键:', e.key, ' 代码:', e.code);
});浏览器滚动的默认行为
浏览器对常用滚动键有内置的默认行为，例如向下箭头会向下滚动，Space 键也会触发分页滚动。这些默认行为可能干扰你自定义的滚动逻辑，因此在关键键上通常需要调用 e.preventDefault() 来实现自定义控制。
在设计按键驱动的滚动时，要清楚哪些场景需要拦截默认行为，哪些场景保留浏览器的自然滚动，以兼顾用户的熟悉度和自定义体验。
// 阻止默认滚动，准备使用自定义滚动函数
document.addEventListener('keydown', (e) => {const keys = ['ArrowDown','ArrowUp','PageDown','PageUp','Space'];if (keys.includes(e.key)) {e.preventDefault();}
});实现基本滚动控制的核心 API
滚动相关的 DOM API
要在页面中实现精细滚动，最核心的是掌握 scrollTop、scrollLeft、scrollTo、以及 scrollBy 等 API。这些接口为滚动容器（如 window 或某个滚动元素）提供直接控制能力。
对于整页滚动，可以通过 window.scrollTo 或 window.scrollBy 实现定位或增量滚动。结合滚动距离的增量 deltaY，可以设计更细腻的滚动策略以适应不同分辨率设备。
结合键盘键位实现距离滚动
要实现“每次按键滚动固定距离”的效果，可以定义一个 滚动步长，如 40px，并通过 scrollBy 来实现。为了在不同设备上获得一致体验，建议使用 requestAnimationFrame 来调度滚动，避免瞬间跳动。
let step = 40; // 每次按键滚动距离（像素）
document.addEventListener('keydown', (e) => {if (e.key === 'ArrowDown') window.scrollBy(0, step);if (e.key === 'ArrowUp') window.scrollBy(0, -step);
});使用 requestAnimationFrame 实现平滑滚动
为什么使用 raf 来平滑滚动
直接调用 scrollBy 或 scrollTo 可能导致瞬时跳动或跳帧。通过使用 requestAnimationFrame，可以把滚动拆分成多帧执行，与浏览器的重绘节奏保持同步，从而获得更流畅的视觉体验。
在实现细粒度滚动时，时间线控制成为关键。借助 RAF 可以实现渐进式滚动，让用户感知更自然的运动过程。
实现一个自定义滚动器
下面的示例展示了一个可重复触发的平滑滚动实现：接收目标偏移量，使用 requestAnimationFrame 逐帧移动，直到达到目标位置。
function smoothScrollBy(dx, dy, duration = 300) {const startX = window.scrollX;const startY = window.scrollY;const endX = startX + dx;const endY = startY + dy;const startTime = performance.now();function frame(now) {const t = Math.min(1, (now - startTime) / duration);// 简单线性插值const curX = startX + (endX - startX) * t;const curY = startY + (endY - startY) * t;window.scrollTo(curX, curY);if (t < 1) requestAnimationFrame(frame);}requestAnimationFrame(frame);
}document.addEventListener('keydown', (e) => {const step = 60;if (e.key === 'ArrowDown') smoothScrollBy(0, step, 280);if (e.key === 'ArrowUp') smoothScrollBy(0, -step, 280);
});处理无障碍与性能优化
无障碍考虑：键盘只改变视图，不打断屏幕阅读
在设计通过键盘触发滚动的交互时，应确保滚动不会中断屏幕阅读器的阅读顺序。通过可预测的滚动行为和合理的焦点管理，可以提升无障碍性。滚动事件的可重复性和键盘导航的一致性，是提升无障碍体验的关键。
为了兼顾不同用户的偏好，应在必要时提供可关闭的自定义滚动选项，确保依赖辅助技术的用户仍然可以使用熟悉的导航方式。
性能要点：选择性阻止与监听模式
在高频率的键盘事件处理中，使用 passive: false 的事件监听，才能在需要时调用 preventDefault，从而避免滚动冲突带来的错位感。
此外，对滚动逻辑进行节流或去抖处理，有助于降低重绘次数，提升页面响应速度和CPU/GPU 的使用效率。
// 使用节流控制 keydown 事件的处理频率
let lastTime = 0;
document.addEventListener('keydown', (e) => {const now = performance.now();if (now - lastTime < 60) return; // 60ms 间隔lastTime = now;// 处理滚动逻辑
});