设置textarea的overflow:scroll后高度增加产生多余间距如何解决

问题根因 #

高度变化由两个原因导致：

• overflow: scroll 会默认同时占用横向、纵向滚动条的占位空间，哪怕内容未溢出，滚动条本身的高度会撑开textarea总高度
• 你没有为textarea设置固定高度，浏览器会自动根据滚动条、默认行高计算实际高度，导致最终高度远高于单行文的预期高度
• 补充：原代码还存在两个语法问题，一是name="comment缺少闭合引号，二是return中返回了textarea和div两个同级根元素，不符合React语法要求

解决方案 #

修改styled-components样式规则，同时修正语法错误即可实现需求：

1. 给textarea显式设置固定高度，匹配你需要的单行/指定行高度，高度不会再自动变化
2. 把overflow: scroll调整为overflow-y: auto，内容溢出时才出现纵向滚动条，既保留滚动能力，又避免无内容时滚动条占位撑高；如果你需要始终显示纵向滚动条，把overflow-y: auto改为overflow-y: scroll即可，只要固定了高度不会出现高度变化问题
3. 补充box-sizing: border-box避免内边距、边框额外撑开高度
4. 修正语法错误，补充引号和React根节点包裹

修改后完整代码如下：

import React from 'react';
import styled from 'styled-components';

const CommentField = styled.textarea`
      background: transparent;
      border: none;
      outline: none;
      padding: 0px;
      // 控制滚动规则，仅纵向滚动
      overflow-y: auto;
      overflow-x: hidden;
      resize: none;
      // 显式设置固定高度，可根据你的行高需求调整数值
      height: 1.5em;
      // 避免盒模型计算额外撑高元素
      box-sizing: border-box;
    `;

const Comment = () => {
    return( <>
            <CommentField
                id="comment"
                name="comment"
                placeholder="Add your comment here"
                cols={30}
                rows={1}
              /> 
            <div>date / time </div>
            </> )
}

export default Comment;

内容的提问来源于stack exchange，提问作者Steven Dornan