如何修复Google Extension选词时部分网站滚动条消失问题

• 检查扩展注入UI元素的定位与溢出设置
  翻译类扩展的弹窗通常会用fixed定位，如果你用了Material UI的Popper或Tooltip组件，默认配置可能意外修改了html/body元素的overflow属性。打开Chrome开发者工具，对比选中文字前后页面根元素的样式变化，确保你的弹窗容器设置overflow: visible，且不要给全局元素强制设overflow: hidden。

• 用pointer-events隔离UI元素与页面滚动
  若扩展弹窗覆盖了滚动条区域，会导致滚动条无法正常显示或交互。给弹窗容器添加pointer-events: none，同时给弹窗内的按钮、输入框等交互元素单独设置pointer-events: auto，既不影响页面滚动，又能保留扩展的交互功能：

  .translate-popup-wrapper {
    position: fixed;
    pointer-events: none;
  }
  .translate-popup-wrapper .action-btn {
    pointer-events: auto;
  }
  

• 避免全局样式冲突
  React+Material UI的CSS-in-JS默认会生成隔离的类名，但如果你的content script注入了全局样式，可能会覆盖Youtube、Stackoverflow这类网站的自定义滚动条样式。确保你的样式只作用于扩展自身的元素，不要直接选择html、body等全局标签。

• 延迟UI注入时机避免布局冲突
  选中文字时的DOM操作可能触发页面重排，而部分网站的自定义滚动条对布局变化敏感，会导致滚动条隐藏。用requestAnimationFrame延迟弹窗注入，避开页面的布局计算周期：

  document.addEventListener('mouseup', () => {
    const selectedText = window.getSelection().toString().trim();
    if (selectedText) {
      requestAnimationFrame(() => {
        // 执行弹窗渲染逻辑
      });
    }
  });
  

• 针对特定网站做兼容处理
  Youtube和Stackoverflow的滚动条是自定义实现，和默认浏览器滚动条行为不同。可以检测当前域名，对这类网站单独强制保留滚动条：

  const targetDomains = ['youtube.com', 'stackoverflow.com'];
  const currentHost = window.location.hostname;
  if (targetDomains.some(domain => currentHost.includes(domain))) {
    document.body.style.setProperty('overflow-y', 'scroll', 'important');
  }
  

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