textarea滚动条不总显示，因需同时满足内容溢出和overflow允许显示；可靠方案是固定高度+overflow-y:scroll+禁用resize，并为iOS加-webkit-overflow-scrolling:touch。
直接给 <textarea> 设 overflow: scroll 不能强制显示滚动条——它只在内容溢出时才生效；真正能“始终显示垂直滚动条”的做法，是固定高度 + overflow-y: scroll + 禁用自动缩放。
为什么 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，但需配合尺寸约束才有效
示例：
立即学习“前端免费学习笔记（深入）”；
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，否则横向滑动可能被拦截
别踩这些坑
很多方案看似能“强制显示”，实际埋了兼容性雷。
- 不要只设
overflow: scroll而不设height或max-height——textarea会无限撑高，滚动条永不触发 - 避免用
rows属性控制高度：它只是提示值，不同字体/行高下实际像素高度不一致，无法精确控制溢出 - 不要对
textarea使用display: block或flex布局强行约束——它本身是替换元素，部分布局模式会干扰滚动机制 -
overflow: overlay在现代浏览器已基本不可用（WebKit 已废弃），别再试
最稳的路径就一条：固定可预测的高度 + 显式 overflow-y: scroll + 移动端补 -webkit-overflow-scrolling: touch。其他花招，90% 是在绕开这个事实。
