在 React 里优雅地 “隐藏 iframe 滚动条”

前端有一个经典问题：

你在宿主页面怎么写 CSS，都管不到 iframe 内部的滚动条。

所以正确的前端方案不是 "给外层容器加 overflow"，而是：尽量在 iframe 自己层面兜底 + 同源时向 iframe 内注入 CSS。

本文只聚焦前端实现，不展开前后端传参链路。

1. 为什么你明明设置了，滚动条还是在？

因为滚动条来自 iframe 内部 document：

外层 div 的 overflow-hidden 只能裁剪 "iframe 这个盒子" 是否溢出
iframe 里面的页面是否出现滚动条，取决于 iframe 内部的 html/body 或某个容器的 overflow
宿主页面的 CSS 不会跨 document 生效（iframe 天生隔离）

2. 我们最终用了 "两层方案"，解决现实世界的不确定性

实现集中在 src/components/Search/ViewExtensionIframe.tsx:1-88。

2.1 第一层：`scrolling="no"` 作为低成本兜底

tsx 复制代码

<iframe scrolling={hideScrollbar ? "no" : "auto"} />

它不是现代标准，但在某些 WebView/嵌入环境里仍能减少滚动条出现的概率。

它的价值在于：不依赖同源，哪怕你进不去 iframe，也能 "碰一碰运气"。

2.2 第二层（主力）：同源时注入一段隐藏滚动条的 CSS

核心是这段逻辑（同文件 applyHideScrollbarToIframe）：

src/components/Search/ViewExtensionIframe.tsx:5-39

做法很直接：

拿到 iframe.contentDocument
往里面塞一个带固定 id 的 <style>
开关关闭时把这个 <style> 删掉

注入的 CSS 同时覆盖主流引擎：

css 复制代码

* {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* 老 IE/Edge 风格 */
}
*::-webkit-scrollbar {        /* Chrome/Safari */
  width: 0px;
  height: 0px;
}

为什么用 *？

扩展页面的滚动容器不一定是 body，可能是任意 div overflow-auto
用 * 能最大概率"全场隐藏"，更通用

为什么要固定 id？

防止重复注入（多次 onLoad / 状态变化）
关闭时能精确移除，保证可逆

3. 为什么要 "onLoad + useEffect" 双触发？

这是最容易漏、也最影响体验的一点。

useEffect：响应 hideScrollbar 变化（开关切换时立刻生效）
onLoad：保证"首次加载完成后一定注入成功"

原因：iframe 的加载时序不可控。你在 React 渲染完时，iframe 可能还没 ready，contentDocument 为空；等到 onLoad 才能 100% 确认 document 存在。

对应代码：

src/components/Search/ViewExtensionIframe.tsx:52-55
src/components/Search/ViewExtensionIframe.tsx:78-84

4. 这个方案的边界与坑（提前写清楚，后面少掉头发）

4.1 "隐藏滚动条" 不等于 "不能滚"

我们只隐藏 scrollbar 的视觉表现，滚动行为仍存在（滚轮/触摸板/键盘都能滚）。

这在沉浸式页面很舒服，但在长页面里也可能让用户不知道 "还能滚"。

4.2 跨域 iframe：注入会失败，但不会炸

如果 iframe 加载跨域页面，访问 contentDocument 会触发同源限制。当前实现用 try/catch 静默吞掉异常，结果是：

CSS 注入失败
只剩 scrolling="no" 兜底，效果不保证

这不是 bug，是浏览器安全模型决定的。

4.3 全局 `*` 的副作用

它会把 iframe 内所有滚动条都干掉，包括某些组件内部滚动区域、代码块滚动等。

目前我们选择"通用性优先"，但如果未来某些扩展需要保留局部滚动条，就要改为更精确的选择器策略。

5. 一句话总结

在前端想稳定控制 iframe 滚动条，最靠谱的思路是：

先用 iframe 自身属性做兜底
再在同源条件下对 iframe 内部 document 注入 CSS
用固定 style id 保证幂等与可逆
用 onLoad + effect 解决时序问题

这就是 hideScrollbar 在前端真正解决的问题：不是写没写 CSS，而是有没有把 CSS 写到"对的世界里"。