本文介绍如何通过 tampermonkey 脚本在 onedrive 页面加载时自动聚焦关键滚动容器，解决 page up/down 键初始失效的问题，涵盖事件监听策略、dom 定位技巧及无障碍兼容性处理。
本文介绍如何通过 tampermonkey 脚本在 onedrive 页面加载时自动聚焦关键滚动容器，解决 page up/down 键初始失效的问题，涵盖事件监听策略、dom 定位技巧及无障碍兼容性处理。
OneDrive（尤其是 onedrive.live.com 和 photos.onedrive.com）部分页面采用 SPA 架构或动态内容注入机制，导致初始状态下 或默认文档节点获得焦点，而实际可滚动区域（如照片列表、文件网格）尚未被浏览器识别为“可键盘导航的活跃容器”。此时按 Page Up/Down 无响应——根本原因在于：键盘滚动行为依赖于当前 document.activeElement 所在的、具有 overflow: auto/scroll 且支持焦点的可滚动元素，而非整个页面。
要可靠触发该行为，需主动定位并聚焦目标容器。实践中，OneDrive 常用带 aria-label="Photos list" 或类似语义化标签的 <div> 作为主滚动区（可通过 DevTools 的 <strong>Accessibility 面板</strong>或 <strong>Elements → 查找 aria-label 属性</strong>快速验证）。但注意：普通 <code><div> 默认不可聚焦，必须显式设置 <code>tabIndex（推荐 -1，允许脚本聚焦但不进入自然 Tab 顺序），同时建议禁用 outline 避免视觉干扰。
以下是一个生产就绪的 Tampermonkey 脚本示例，兼顾多阶段加载场景：
// ==UserScript==
// @name OneDrive keyboard scroll
// @namespace http://tampermonkey.net/
// @version 0.2
// @description Auto-enable keyboard scrolling on OneDrive by focusing scrollable region
// @author You
// @match https://photos.onedrive.com/*
// @match https://onedrive.live.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=onedrive.com
// @grant none
// ==/UserScript==
function focusScrollableRegion() {
// 支持多种常见选择器，增强鲁棒性
const selectors = [
'div[aria-label="Photos list"]',
'div[aria-label="Files list"]',
'[role="grid"][aria-label]',
'.od-GridRoot', // OneDrive 内部类名（可选备用）
];
for (const sel of selectors) {
const target = document.querySelector(sel);
if (target) {
target.tabIndex = -1;
target.style.outline = 'none';
target.focus({ preventScroll: true });
console.debug('[OneDrive Scroll Fix] Focused:', target);
return;
}
}
console.warn('[OneDrive Scroll Fix] No scrollable region found.');
}
// 兼容全量加载（load）与 SPA 导航（navigation API）
window.addEventListener('load', () => setTimeout(focusScrollableRegion, 500));
if ('navigation' in window) {
window.navigation.addEventListener('navigatesuccess', () => setTimeout(focusScrollableRegion, 800));
} else {
// 降级：监听 hashchange 或 DOMContentLoaded（适用于旧版）
window.addEventListener('hashchange', () => setTimeout(focusScrollableRegion, 800));
}关键实践提示：
- ✅ 延迟执行必要：
setTimeout确保目标元素已挂载（SPA 渲染存在时序差）； - ✅ 多选择器兜底：OneDrive 不同页面结构差异大，组合使用语义属性（
aria-label、role）和类名更可靠； - ✅
preventScroll: true是重点：避免聚焦时意外滚动到页面顶部，影响用户体验； - ⚠️ 勿滥用
tabIndex="0"：会破坏原有 Tab 顺序，-1更符合辅助技术规范； - ? 调试建议：在 DevTools Console 中运行
document.querySelectorAll('[tabIndex]')可快速检查已聚焦元素；使用 Rendering → Paint Flashing 观察滚动区域重绘是否生效。
该方案无需修改页面原始逻辑，完全通过用户脚本注入实现，安全、轻量且符合 Web 标准。
