chrome 浏览器存在一个已知限制：当页面主体（body）本身可滚动时，鼠标滚轮事件不会自动捕获并委托给 shadow dom 内部具有 overflow: auto/scroll 的子元素，导致 hover 时无法滚动——本文提供兼容、无侵入、符合 web components 规范的解决方案。
chrome 浏览器存在一个已知限制：当页面主体（body）本身可滚动时，鼠标滚轮事件不会自动捕获并委托给 shadow dom 内部具有 overflow: auto/scroll 的子元素，导致 hover 时无法滚动——本文提供兼容、无侵入、符合 web components 规范的解决方案。
在基于微前端架构的现代 Web 应用中，使用 Shadow DOM 封装组件（如导航栏下拉菜单、设置面板等）已成为隔离样式与脚本的标准实践。然而，开发者常遇到一个棘手问题：在 Chrome 中，鼠标悬停于 Shadow DOM 内部的可滚动容器上时，滚轮操作仍作用于外层文档（document），而非目标容器本身。该行为在 Firefox 和 Safari 中表现正常，属于 Chromium 内核特有的事件委托策略差异。
根本原因在于：Chrome 默认将未被显式阻止传播的 wheel 事件向上冒泡至 <html> 或 <body>，而外层页面若具备滚动能力（例如高度超视口），便会优先响应，从而“劫持”了本应交付给 Shadow DOM 子元素的滚动意图。
✅ 正确解法：在 Shadow DOM 根节点监听 wheel 事件，并对目标可滚动元素执行 preventDefault() + scrollTop/scrollLeft 手动滚动
以下为生产环境验证通过的轻量级方案（无需修改全局 body 样式，无视觉跳动）：
// 在 Shadow Root 初始化后执行（例如 React useEffect / custom element connectedCallback）
const shadowRoot = container.attachShadow({ mode: 'open' });
// ... 渲染逻辑（如 ReactDOM.createRoot(shadowRoot).render(...)）
// ✅ 关键修复：为可滚动容器绑定 wheel 处理器
const scrollableDiv = shadowRoot.querySelector('.App'); // 即你的 overflow:auto 元素
if (scrollableDiv) {
const handleWheel = (e) => {
// 仅当鼠标指针位于该元素内且其具备滚动能力时拦截
if (e.target === scrollableDiv || scrollableDiv.contains(e.target)) {
e.preventDefault(); // 阻止冒泡至外层 document
// 手动执行滚动（支持垂直+水平）
scrollableDiv.scrollBy({
top: e.deltaY,
left: e.deltaX,
behavior: 'auto' // 可选 'smooth'，但注意性能
});
}
};
// 注意：必须在 shadowRoot 上监听（而非 scrollableDiv），确保捕获阶段生效
shadowRoot.addEventListener('wheel', handleWheel, { passive: false });
}? 重要注意事项：
- passive: false 是必需的，否则 preventDefault() 在 Chrome 中将被忽略；
- 不要直接在 scrollableDiv 上监听 wheel —— 因为滚动过程中 e.target 可能变为子元素（如 <h1>），需借助 contains() 判断上下文；
- 若需支持触摸板惯性滚动（smooth behavior），建议搭配 scroll-behavior: smooth CSS 声明，并在 scrollBy 中启用 behavior: 'smooth'（注意：频繁触发可能导致卡顿，生产环境建议设为 'auto'）；
- 此方案完全封装于 Shadow DOM 内部，对外层页面零侵入，不修改 body.style.overflow，避免因隐藏/恢复滚动条引发的页面重排（layout shift）。
? 进阶提示：对于微前端场景中的导航栏下拉菜单，还可结合 focusin/focusout 监听 + tabindex="0" 确保键盘可访问性，并在 blur 时自动关闭菜单，形成完整交互闭环。
综上，该方案以最小代价绕过 Chromium 的 Shadow DOM 滚轮事件缺陷，在保持 Web Components 封装性的同时，实现跨浏览器一致的滚动体验——无需 hack 式样式切换，亦不依赖第三方库，是微前端与设计系统迁移过程中的推荐实践。
