HTML表单多行输入控件滚动条强制显示的方法-html教程-PHP中文网

textarea滚动条不总显示，因需同时满足内容溢出和overflow允许显示；可靠方案是固定高度+overflow-y:scroll+禁用resize，并为ios加-webkit-overflow-scrolling:touch。

html表单多行输入控件滚动条强制显示的方法

直接给 <textarea></textarea> 设 overflow: scroll 不能强制显示滚动条——它只在内容溢出时才生效；真正能“始终显示垂直滚动条”的做法，是固定高度 + overflow-y: scroll + 禁用自动缩放。

为什么 `textarea` 的滚动条不总是显示

<textarea></textarea> 默认行为是随内容自适应高度（尤其在未设 rows 或 height 时），且其 overflow 属性受浏览器默认样式影响较大。即使写了 overflow: scroll，若内容没撑满、或浏览器重置了该属性（如 Chrome 对 textarea 的 UA 样式含 overflow: auto），滚动条仍可能不出现。

常见错误现象：textarea 内容很少时滚动条消失，用户误以为“不能滚动”
根本原因：滚动条是否渲染，取决于「内容是否溢出容器」+「overflow 值是否允许显示」，二者缺一不可
注意：overflow: scroll 确实会强制占位，但某些浏览器（如 Safari）对 textarea 的实现会忽略它，除非显式限制尺寸

`textarea` 强制显示垂直滚动条的可靠写法

必须同时满足三个条件：固定高度、禁用拉伸、覆盖 UA 溢出设置。

给 textarea 显式设置 height（如 height: 120px）或 max-height（更推荐，兼容内容少时不过度留白）
加 resize: none，防止用户拖拽改变尺寸导致滚动条意外消失
写死 overflow-y: scroll，并确保 overflow-x: hidden（避免换行文本触发横向滚动）
重置浏览器默认样式：textarea { overflow: unset; } 或直接 overflow: scroll，但需配合尺寸约束才有效

示例：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

textarea {
  height: 120px;
  max-height: 120px;
  resize: none;
  overflow-y: scroll;
  overflow-x: hidden;
}

移动端 iOS Safari 的特殊处理

iOS Safari 对 textarea 的滚动支持较弱，尤其在 position: fixed 或父容器有 transform 时，常出现滚动卡顿或失效。

必须加 -webkit-overflow-scrolling: touch（虽已标记为废弃，但不加大概率无法惯性滚动）
避免在 textarea 父级使用 will-change: transform 或 transform: translateZ(0)，它们会破坏原生滚动层
如果页面启用了 touch-action: pan-y 全局设置，需对 textarea 单独重置为 touch-action: manipulation，否则横向滑动可能被拦截