滚动 textarea 内容和带有父 div 的子 div 仅在反应答案

【问题标题】：scroll the textarea content and a child div with parent div only in react滚动 textarea 内容和带有父 div 的子 div 仅在反应
【发布时间】：2022-11-10 15:47:21
【问题描述】：

我有一个行号的子 div 和一个父 div 内的 textarea。所以我需要的是只有父 div 应该是可滚动的，既不是 textarea 也不是子 div。父级的高度也应固定为 170px。

以下是 Jsx 代码

      <div
        style={{
          display: 'flex',
          overflowY: 'auto',
          height: '150px',
        }}
      >
        <div style={{ marginRight: '10px' }}>
          {lineNumbers?.map((item: any) => (
            <TextWrapper
              key={item}
              text={`${item}`}
              className={'marginTB2'}
            />
          ))}
        </div>
       
        <textarea
          rows={6}
          value={enteredAdrs}
          onChange={(e) => {
            setEnteredAdrs(e.target.value)
          }}
          onBlur={handleManualData}
          onKeyDown={handleKeyDown}
        /> 
        
      </div>

以下是css代码

 textarea{
    background-color: #151414;
    color: #fff;
    padding: 0;
    line-height: 157%;
    box-sizing: border-box;
    border: none;
    margin: 0;
    width: 100%;
    resize: none !important;
    height: 100%;
  }

  textarea:focus{
    box-shadow: none !important;
    outline: none;
  }

【问题讨论】：

行号和 textarea 将与父 div 一起滚动？
是的@JunaidShaikh

标签： javascript html css reactjs

【解决方案1】：

享受

<div className="textarea">
    <div className="container">
        <div className="numbers">
            {[...Array(lines)].map((_, i) => <span key={i}>{i+1}</span>)}
        </div>
        <textarea value={value} onChange={onChange} />
    </div>
</div>

.textarea {
    display: inline-flex;
    height: 170px;
    width: 100%;
    overflow-y: scroll;

    .container {
        display: flex;
        width: 100%;
        height: fit-content;
    }

    textarea {
        line-height: 28px;
        overflow: hidden;
        padding: 8px 12px;
        border: 0;
        outline: none;
        resize: none;
        width: 100%;
        font-size: 18px;
    }

    .numbers {
        padding-top: 8px;
        display: flex;
        flex-direction: column;
        width: 40px;
        line-height: 28px;
        align-items: center;
        font-size: 16px;
        padding-bottom: 18px;
    }
}

【讨论】：