React Textarea组件overflow-y滚动条在Chrome/Edge中不显示的问题

问题解决步骤 #

• 标签使用错误：你用了<input type="textarea"/>，这是不正确的写法，HTML中多行文本输入需要用<textarea>标签，而非input的textarea类型。
• 样式选择器不匹配：滚动条样式的选择器用了.frame，但你的文本框类名是largeTextBox，两者不对应，导致样式无法生效。
• 滚动条样式语法错误：frame-webkit-scrollbar-track缺少冒号，正确写法是::-webkit-scrollbar-track。

修正后的代码 #

React组件

const MyComponent = () => {
  return (
    <textarea className={styles.largeTextBox} id="someTextBox" />
  )
}

样式表

.largeTextBox {
  width: 200px;
  height: 50px;
  overflow-x: hidden;
  overflow-y: scroll;
  /* 可选：添加内边距避免文本贴边 */
  padding: 8px;
  box-sizing: border-box;
}

/* WebKit内核浏览器（Chrome/Edge）的滚动条样式 */
.largeTextBox::-webkit-scrollbar {
  width: 11px;
}

.largeTextBox::-webkit-scrollbar-track {
  background-color: #fff;
  border-radius: 8px;
}

.largeTextBox::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 8px;
  /* 可选：添加边框区分滚动条与轨道 */
  border: 2px solid #fff;
}

修改后文本框会始终显示垂直滚动条，自定义样式也能正常生效，可输入足够多内容验证滚动功能。

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