本文详解移动端 textarea 在内容增长时滚动跳至顶部、界面闪烁的根本原因，并提供基于行高计算的稳定高度适配方案，配合容器滚动控制，彻底规避浏览器默认行为干扰。
本文详解移动端 textarea 在内容增长时滚动跳至顶部、界面闪烁的根本原因，并提供基于行高计算的稳定高度适配方案，配合容器滚动控制，彻底规避浏览器默认行为干扰。
在构建响应式表单时，为
上述问题无法仅靠 textarea.style.height = textarea.scrollHeight + 'px' 解决，因为 scrollHeight 在移动端可能返回过时值（如未包含最新换行后的行高），且 overflow-y: auto 会使 textarea 自身产生滚动条，与父容器滚动逻辑冲突，加剧渲染抖动。
✅ 推荐解决方案：基于行数 + 行高的确定性高度计算，配合容器级滚动控制：
const handleTextAreaChange = (event) => {
const textarea = event.target;
// 获取真实行高（单位：px），兼容不同字体和缩放
const lineHeight = parseInt(getComputedStyle(textarea).lineHeight, 10) || 24;
const minVisibleLines = 4; // 至少显示 4 行，避免过矮
const content = textarea.value;
// 按换行符分割，准确统计行数（含空行）
const lines = content.split('\n');
const numberOfLines = lines.length;
// 计算目标高度：行数 × 行高，但不低于最小可见高度
const fixedHeight = Math.max(
lineHeight * minVisibleLines,
lineHeight * numberOfLines
);
textarea.style.height = `${fixedHeight}px`;
setDescription(content);
};
对应 CSS 需同步调整：
.blog-form textarea {
width: 100%;
resize: none;
overflow-y: hidden !important; /* 关键：禁用 textarea 自身滚动 */
}
/* 父容器承担滚动职责 */
.blog-form {
max-height: 400px; /* 根据实际设定固定/最大高度 */
overflow-y: auto;
}
⚠️ 注意事项：
- 勿使用 value 受控属性（即不要同时设置 value={description} 和 onChange），否则 React 会接管输入状态，导致光标跳变；应保持 textarea 为非受控组件，仅通过 onChange 同步 state；
- getComputedStyle(textarea).lineHeight 返回值可能是 normal 或 em，需 fallback 处理（如 || 24）；
- 若文本含富样式（如 emoji、不同字号），建议统一使用等宽字体（如 'SF Pro Text', -apple-system, sans-serif）并预设 line-height: 1.5，提升行高计算稳定性；
- 移动端需额外添加 viewport 元标签确保缩放一致性：。
该方案摒弃了不可靠的 scrollHeight，转而通过可预测的行数与行高生成稳定内联高度，彻底消除因尺寸突变引发的重排抖动；再将滚动能力上移至语义更清晰的父容器，既保障用户体验，又符合移动端 Web 最佳实践。
