要让 textarea 显示滚动条，需设置固定 width 和 height（或 max-height）并配合 overflow-y: auto；input[type="text"] 不支持垂直滚动条，应改用 textarea。
textarea 怎么让内容超出时显示滚动条
默认情况下 textarea 会随内容自动换行，但不会自动出现滚动条——必须手动控制尺寸和溢出行为。关键不是“加滚动条”，而是“限制尺寸 + 触发 overflow”。
-
textarea是替换元素（replaced element），overflow属性对它生效，但只在设置了明确的width和height（或max-height）时才起作用 - 别用
resize: none后又忘了设height，否则可能高度塌缩、内容被截断且无滚动条 - 移动端要注意：iOS Safari 对
textarea的overflow-y: scroll支持不稳定，更可靠的做法是固定height+overflow-y: auto
示例：
<textarea style="width: 300px; height: 120px; overflow-y: auto;"></textarea>
input[type="text"] 能不能加垂直滚动条
不能。标准 input[type="text"] 是单行输入框，不支持换行，也不支持滚动条。强行设置 overflow 或 height 不会触发滚动，只会导致文字被裁剪或布局异常。
- 如果需要多行可滚动输入，请改用
textarea，这是语义和行为都正确的选择 - 想“看起来像 input 但能滚动”？可以用
contenteditable+div模拟，但会丢失表单原生校验、提交行为、无障碍支持，不推荐 - 某些 UI 库（如 Ant Design）的
Input.TextArea封装了textarea并加了自适应高度逻辑，本质仍是textarea，不是input
滚动条样式怎么统一适配 Chrome / Firefox / Safari
CSS 自定义滚动条目前没有跨浏览器统一方案，各引擎前缀和能力差异大，尤其是 Safari 对 ::-webkit-scrollbar 的支持有限且不支持 scrollbar-width。
立即学习“前端免费学习笔记（深入）”；
- Chrome / Edge：支持
::-webkit-scrollbar系列伪元素，可精细控制轨道、滑块、按钮 - Firefox：仅支持
scrollbar-width: thin | auto | none和scrollbar-color: thumb-track，无法定制滑块形状 - Safari（macOS）：支持部分
::-webkit-scrollbar，但 iOS Safari 完全忽略；且即使设置了scrollbar-width，textarea 滚动条仍可能不可见 - 务实做法：优先保证功能可用（有滚动条），再用
@supports有条件地增强样式，不要强求三端完全一致
form 提交时 textarea 滚动位置会重置吗
会。原生表单提交（包括 POST 后页面刷新）会导致整个页面重建，textarea 的滚动位置必然丢失。这不是 bug，是浏览器默认行为。
- 如果用
event.preventDefault()阻止提交，并通过fetch或XMLHttpRequest异步提交，滚动位置可保持 - 服务端渲染（SSR）场景下，若后端返回新 HTML 页面，即使内容相同，DOM 也是全新创建的，scrollTop 无法继承
- 想“提交后保持位置”？只能前端拦截提交 + 手动保存
scrollTop+ 提交成功后恢复，但需注意光标位置和用户编辑状态是否同步
滚动条本身不参与表单数据提交，它只是视图状态，这点常被忽略。
