Chrome中Shadow DOM内overflow容器滚不动，是因wheel事件被外层捕获而未进入shadowRoot；需在容器上监听wheel并调用e.preventDefault()（须设{passive:false}），再手动更新scrollTop。
Shadow DOM 内 overflow 容器为什么滚不动
Chrome 下 Shadow DOM 里的 overflow: auto 容器鼠标悬停滚动失效，不是 CSS 没写对，而是 Chromium 的 wheel 事件分发机制绕过了 Shadow Boundary —— 它优先把 wheel 派给外层可滚动祖先（比如 document.body），根本没传进 shadowRoot 里。
Firefox 和 Safari 没这个问题，所以本地测正常不代表上线 OK；DevTools 里能看到 #shadow-root (open)，但鼠标滚轮事件监听器就是收不到。
- 必须显式加
tabindex="0"或主动监听wheel并调用e.preventDefault() -
overflow-y: auto单独写无效，得配max-height或height（否则容器自适应撑开） - 别信“加了
scroll-behavior: smooth就能自动滚”，它只影响scrollIntoView和锚点跳转，不修复 wheel 事件丢失
怎么让 Shadow DOM 滚动容器真正响应 wheel
最稳的解法是在 shadowRoot 内目标容器上直接监听 wheel，阻止默认行为，再手动更新 scrollTop。不需要改全局样式，也不依赖焦点管理。
关键点：监听必须带 { passive: false }，否则 Chrome 会忽略 preventDefault()；delta 放大系数（如 * 1.2）用来匹配原生滚动手感。
立即学习“前端免费学习笔记（深入）”；
- 代码里用
shadowRoot.querySelector('.scroll-container')获取元素，别用document.querySelector - 如果容器是动态渲染的（比如 React useEffect 里挂载），确保 DOM 节点已存在再绑定事件
- 避免在 handler 里调用
scrollIntoView或触发重排操作，否则滚动会卡顿 - 移动端 touchpad 滚动也走
wheel事件，这个方案一并覆盖
iframe 嵌在 Shadow DOM 里还能不能滚动
能挂，但 iframe 是替换元素，它的滚动行为和普通 div 不同：即使父容器有 overflow: auto，iframe 自身内容仍走独立滚动链，且 ::part() 无法控制其内部滚动条样式。
常见误区是给 iframe 外层 div 加 overflow，指望它截获 iframe 内容滚动 —— 实际上 iframe 内部滚动完全自治，外层 overflow 对它无效。
- 要让 iframe 内容可滚动，必须在 iframe 页面自身设
body { overflow: auto }或固定高度容器 - 想从父页控制 iframe 滚动位置？只能通过
iframe.contentWindow.scrollTo()，前提是同源；跨域必须靠postMessage中转 - 用 Playwright/Selenium 定位时，必须先
locator('my-element').locator('iframe')进 shadow，再.contentFrame()进 iframe 上下文，一步到位的 selector 会失败
滚动容器样式在 Shadow DOM 里为啥不生效
::-webkit-scrollbar 这类伪元素必须作用于“实际触发滚动的容器”，而不是随便一个父 div。Shadow DOM 里漏掉这步，滚动条就回退到系统默认样式，且 Firefox 完全无视这套 WebKit 语法。
Firefox 只认 scrollbar-width 和 scrollbar-color，而且只对设置了 overflow 的块级元素生效 —— 给 :host 或 html 设没用。
- 正确写法：
.chat-log { max-height: 300px; overflow-y: auto; }+.chat-log::-webkit-scrollbar { width: 6px; } - Firefox 需补：
.chat-log { scrollbar-width: thin; scrollbar-color: #666 #eee; } -
::-webkit-scrollbar-thumb必须设background，透明或未定义 = 滑块不可见 - macOS Safari 用户开了“自动隐藏滚动条”，CSS 设置会被系统强制覆盖，前端无权干预
滚动容器在 Shadow DOM 里不是加个 overflow 就完事，Chrome 的 wheel 事件穿透限制、iframe 的双重隔离、伪元素的作用范围，每个点都容易漏掉——尤其是 passive 默认 true 导致 preventDefault 失效，这种细节一错，整个滚动就静音了。
