确定滚动点击区域，编写Tampermonkey脚本修复OneDrive滚动按键失效

一、DevTools核心观测视图 #

• Elements面板：
  • 点击页面前后，重点检查元素的class、style属性变化，尤其是和focus、pointer-events、scroll-behavior相关的属性。右键选中滚动区域并“检查”，在右侧「Styles」面板对比点击前后的样式差异，开启「Styles」面板右上角的:hov按钮，查看:focus、:active伪类的样式变化。
  • 排查是否有动态添加/移除的DOM元素（如遮罩层、浮层），这些元素可能拦截键盘事件。用Elements面板左上角的“选择元素”工具点击滚动区域，观察选中元素是否在点击前后发生变化。
• Event Listeners面板：
  • 在Elements面板右侧切换到「Event Listeners」，筛选keydown、keyup事件，对比点击前后页面绑定的键盘事件差异，重点看是否有事件被移除/新增，以及事件的handler函数是否变化。
  • 勾选「Ancestors」选项，查看父元素上的事件监听——键盘事件可能会冒泡到上层元素被拦截。
• Performance面板：
  • 点击「Record」按钮后执行点击操作，停止录制后查看事件流，定位点击事件触发的所有函数调用，排查是否有修改滚动行为或焦点状态的操作。

二、控制台辅助JS命令 #

• 实时监听键盘事件（捕获阶段，追踪事件源头）：

  document.addEventListener('keydown', (e) => {
    if (e.key === 'PageUp' || e.key === 'PageDown') {
      console.log('键盘事件触发元素:', e.target);
      console.log('事件是否被阻止:', e.defaultPrevented);
      console.trace('事件调用栈');
    }
  }, true);
  

• 定位所有可滚动容器：

  const scrollableElements = Array.from(document.querySelectorAll('*')).filter(el => {
    const style = window.getComputedStyle(el);
    return (style.overflowY === 'auto' || style.overflowY === 'scroll') && el.scrollHeight > el.clientHeight;
  });
  console.log('可滚动容器:', scrollableElements);
  

  点击前后分别执行，对比容器的scrollTop或focus状态变化（即使document.activeElement显示为body，滚动容器本身可能需要获取焦点才能响应键盘）。
• 模拟点击并记录状态差异：

  // 记录点击前状态
  const beforeState = {
    scrollTop: document.scrollingElement.scrollTop,
    scrollableStyles: scrollableElements.map(el => ({
      el: el,
      overflow: window.getComputedStyle(el).overflowY,
      isFocused: el === document.activeElement
    }))
  };
  // 模拟点击滚动区域（可替换为你实际点击的元素选择器）
  document.querySelector('body').click();
  // 记录点击后状态
  const afterState = {
    scrollTop: document.scrollingElement.scrollTop,
    scrollableStyles: scrollableElements.map(el => ({
      el: el,
      overflow: window.getComputedStyle(el).overflowY,
      isFocused: el === document.activeElement
    }))
  };
  console.log('点击前状态:', beforeState);
  console.log('点击后状态:', afterState);
  

三、额外排查技巧 #

• 禁用除Tampermonkey外的所有扩展，排除第三方扩展干扰。
• 在DevTools「Settings」中开启「Disable JavaScript」，测试原生页面是否存在同样问题——若不存在，说明是OneDrive的JS代码拦截了键盘事件。
• 使用Sources面板的「XHR/fetch Breakpoints」，查看点击前后是否有API请求导致页面状态变更。

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