Javascript 窄文本区域中的上下键

我有这个jsbin:
HTML:

---

当我聚焦文本区域并上下按时，文本会移动。在不改变div和textarea的高度的情况下，如何防止它

将

溢出：隐藏
样式添加到文本区域

text区域{

高度：30px；

字体大小：30px；

溢出：隐藏；

}

将
overflow:hidden
样式添加到文本区域

text区域{

高度：30px；

字体大小：30px；

溢出：隐藏；

}

是否要聚焦文本区域进行编辑。如果你不想聚焦，那么就禁用文本区域。我认为你不能可靠地只显示部分文本。你能解释一下为什么要这样做吗？@andyb：因为我不想让用户体验到文本上下移动。对不起，我不够清楚。为什么有一个文本区域被一个高度小于文本区域高度的容器切断？是否要聚焦文本区域进行编辑。如果你不想聚焦，那么就禁用文本区域。我认为你不能可靠地只显示部分文本。你能解释一下为什么要这样做吗？@andyb：因为我不想让用户体验到文本上下移动。对不起，我不够清楚。为什么有一个文本区域被一个高度小于文本区域高度的容器切断？我以为你不希望文本用上下键移动。。。。这就是它的作用。@adirohan:对。在Chrome上，随着你的改变，文本会移动。好吧，那么我想没有可靠的方法可以像你说的那样：）我以为你不想让文本用上下键移动。。。。这就是它的作用。@adirohan:对。在Chrome上，随着您的更改，文本会移动。好吧，那么我想没有可靠的方法可以像您所说的那样移动：）
<div>
    <textarea>press up and down</textarea>
</div>

div {
  height: 20px;
  overflow: hidden;
}

textarea {
  height: 30px;
  font-size: 30px
}