React项目中iframe的scrolling属性已废弃(ts6385)的替代方案咨询

scrolling属性已从HTML5规范中移除，TypeScript会严格检测这类弃用属性并抛出错误，替代方案是通过CSS的overflow属性控制iframe的滚动行为：

直接替换示例 #

将原代码中的scrolling="no"替换为内联样式：

<div>
  <iframe 
    srcDoc={formText}
    width="600"
    height="600"
    style={{ overflow: 'hidden' }}
  ></iframe>
</div>

精细控制滚动方向 #

如果需要单独控制横向或纵向滚动：

• 仅隐藏纵向滚动：style={{ overflowY: 'hidden' }}
• 仅隐藏横向滚动：style={{ overflowX: 'hidden' }}
• 允许滚动（自动显示滚动条）：style={{ overflow: 'auto' }}
• 强制显示滚动条：style={{ overflow: 'scroll' }}

关于问题普遍性 #

这个问题非常常见，使用React+TypeScript开发的开发者大多会遇到，核心原因是TS严格遵循最新HTML标准，弃用属性会被标记为错误，用CSS控制滚动是当前标准且推荐的实现方式。

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