英文:
React Textarea Input - overflow-y is not showing scrollbar (on Chrome or Edge)
问题
我似乎无法弄清楚如何在React Textarea中显示/添加滚动条。我已参考了这篇旧帖子https://stackoverflow.com/questions/7855590/preventing-scroll-bars-from-being-hidden-for-macos-trackpad-users-in-webkit-blin和其他一些帖子，但都没有成功。
我在Chrome（版本113.0.5672.129）和Edge（版本114.0.1823.37）中进行了测试。
这是我的代码：
const myComponet = () => {
return (
<textarea className={styles.largeTextBox} id="someTextBox"></textarea>
);
}
// 样式表
.largeTextBox {
width: 200px;
height: 50px;
overflow-x: hidden;
overflow-y: scroll;
}
.largeTextBox::-webkit-scrollbar {
width: 11px;
}
.largeTextBox::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
非常感谢您的帮助。
英文:
I can't seem to figure out how to show/add scrollbar to a React Textarea. I have referenced this old post here https://stackoverflow.com/questions/7855590/preventing-scroll-bars-from-being-hidden-for-macos-trackpad-users-in-webkit-blin and few others but have not been successful.
I have tested it in both Chrome (Version 113.0.5672.129) and Edge (Version 114.0.1823.37)
Here is what I have:
const myComponet = () => {
return (
<input type= "textarea" className={styles.largeTextBox} id="someTextBox"/>
)
}
//Stylesheet
.largeTextBox{
width: 200px;
height : 50px;
overflow-x:hidden;
overflow-y:scroll;
}
.frame::-webkit-scrollbar:vertical{
width:11px;
}
.frame-webkit-scrollbar-track{
background-color: #fff;
border-radius: 8px;
}
Really appreciate some help here.
答案1
得分: 0
"textarea" 不是<input>的有效类型。您需要使用<textarea>元素代替。
<textarea className={styles.largeTextBox} id="someTextBox" />
英文:
"textarea" is not a valid type for an <input>. You want a <textarea> element instead.
<textarea className={styles.largeTextBox} id="someTextBox" />
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论