textarea 默认在内容超出由 rows/cols 或 CSS height/width 定义的可视区域时自动显示滚动条；无需设置 overflow: auto，乱加 overflow: hidden 会截断内容；需用 JS 在 input 事件中设 scrollTop = scrollHeight 实现自动滚底，但 iOS 等移动端存在兼容性问题。
textarea 默认滚动条什么时候出现
当内容超出 textarea 可视区域时，浏览器自动显示滚动条——但这个“可视区域”由 rows 和 cols（或 CSS 的 height/width）决定，不是固定像素值。只设 rows="5" 时，高度依赖字体大小和行高，实际高度可能比预期高或低。
常见误区是以为加了 overflow: auto 就能控制，其实 textarea 默认就支持滚动，不需要手动加 overflow；反而乱加 overflow: hidden 会截断内容且不提示用户。
用 CSS 精确控制滚动条显隐和样式
textarea 的滚动条行为由 overflow 属性控制，但必须配合明确的尺寸定义（如 height 或 max-height），否则 overflow 不生效。
-
overflow: auto：内容溢出时显示滚动条（默认行为，通常不用显式写） -
overflow: scroll：始终显示滚动条（含空状态），适合 UI 一致性要求高的场景 -
overflow: hidden：隐藏滚动条且不响应滚动，内容被裁剪——慎用，用户无法看到被遮挡文字 - 滚动条样式可通过
::-webkit-scrollbar系列伪元素定制，但仅限 WebKit 内核（Chrome/Safari/Edge），Firefox 不支持
示例（强制显示垂直滚动条，隐藏水平滚动条）：
立即学习“前端免费学习笔记（深入）”；
textarea {
height: 120px;
overflow-y: scroll;
overflow-x: hidden;
}
textarea 滚动条触发后如何自动滚动到底部
用户输入内容超出可视区时，textarea 不会自动滚动到最新行，需 JS 主动干预。关键点是：不能只靠 scrollTop = scrollHeight，因为光标位置、换行符处理、实时输入节奏都会影响效果。
- 监听
input事件（不是change），确保每次输入都响应 - 使用
el.scrollTop = el.scrollHeight是最简方案，但对中文输入法（IME）中未确认的字符可能失效 - 更稳妥的做法是加
setTimeout延迟执行，让浏览器先完成渲染再滚动 - 如果用了
resize或动态调整高度，需在尺寸变化后也调用一次滚动逻辑
基础实现：
const ta = document.querySelector('textarea');
ta.addEventListener('input', () => {
ta.scrollTop = ta.scrollHeight;
});
移动端 textarea 滚动条异常问题
iOS Safari 对 textarea 滚动支持较弱：软键盘弹出时，scrollTop 设置常失效；部分安卓 WebView 会忽略 overflow 设置，强制显示双滚动条。
- 避免在 iOS 上依赖
scrollTop自动滚动，可改用el.focus()配合scrollIntoView（但仅对整个元素有效，非精确到行） - 禁用缩放（
user-scalable=no）可能缓解滚动错位，但影响可访问性，不推荐 - 若需完全自定义滚动体验，考虑用
contenteditable="true"+div替代textarea，但要自行处理表单提交、换行、光标控制等细节
真正麻烦的不是怎么加滚动条，而是滚动后光标消失、输入法中断、或者用户拖动滚动条时输入焦点丢失——这些细节往往比样式更难调试。
