关于 iframe 和水平滚动的另一个问题答案

【问题标题】：Yet another question about iframe and horizontal scroll关于 iframe 和水平滚动的另一个问题
【发布时间】：2019-04-05 08:58:19
【问题描述】：

在我的 React 应用程序中，我使用的是 iframe，其内容由服务器提供。没有在样式中添加任何关于 overflow 的内容，我只在 Chrome 中看到水平滚动条（没有可拖动的滚动条），而在 FireFox 和 Edge 等其他浏览器中则没有。

添加overflow-x: hidden; I frame 样式的包装器div 就像

.article-container {
  display: flex;
  flex-direction: column;
  flex: auto;
  iframe {
    flex: auto;
    overflow-x: hidden;
  }
  iframe.body {
    overflow-x: hidden;
  }
}

从 CSS 文件中添加 overflow-x: hidden; nighter 或将其作为内联样式添加到 iframe 不起作用，但仍会看到滚动条（在 chrome 中）我知道 iframe 的内容不能从外部操作，以防万一我添加了 iframe.body

所以我的问题是，为什么只能在 Chrome 中看到它，有没有办法隐藏 X 轴滚动？是否与 Flex 和方向有关？

我的主要问题是为什么它只发生在 Chrome 中，以及渲染或浏览器引擎的区别是什么？将 iframe 包装在高度较低的 div 中不是答案，而是 hack

【问题讨论】：

how remove horizontal scroll bar for iframe on google chrome的可能重复
您是否尝试过其他帖子的批准答案中提到的所有解决方案？即使是“如果以上都不是真的-您可以模拟“溢出-x：隐藏””部分，还是您只是在不阅读完整答案的情况下打扰我们？
是的，我已经阅读了该内容以及许多其他帖子，但我在此处发布的这些帖子不起作用。我不是在寻找一个愚蠢的黑客解决方法，所以似乎自 2013 年以来，（您提到的答案）Chrome 中的任何内容都没有改变
听着，你在这里的语气并不鼓励我们帮助你。我了解您想要 2019 年的解决方案。那么也许在 2019 年不要使用 iframe。干杯。

标签： html css reactjs iframe sass

【解决方案1】：

您可以在 iframe 标签中添加 scrolling = "no"

<iframe src="your path" scrolling="no"></iframe>

【讨论】：