滚动到固定下方文本区域的顶部 div

Question

情况：

1. 有一个文本区域比浏览器高 window（并且全是文本）。
2. 顶部有一个 position:fixed; 栏。
3. 当文本区域中的文本被编辑并向下滚动并且用户使用光标键滚动回文本区域的顶部时，文本区域的顶部隐藏在 "bar at the top" 后面。

问题：如何更改布局（HTML，CSS），以便文本区域的第一行通过文本区域内的击键变得可见？

我试过：

• 向文本区域添加边距或填充
• 向包含 textarea
的 div 添加边距或填充
• 向正文元素添加填充

需要说明的是：其中一些措施有助于在使用鼠标滚动到顶部时整个文本区域变得可见。文本区域应该可以通过键盘上的光标键完全访问。

演示：jsfiddle

Answer 1

添加默认 rows 和列 size

<textarea rows="20" cols="50"> first line .. .. </textarea>

并删除文本区域css中的height:10000px;

textarea {
   margin-top:30px;
   height:10000px;
}

css 应该像

textarea { margin-top:30px;} 

Answer 2

你可能会这样做： https://jsfiddle.net/dxg4anaf/4/

.text {
    border-top: 18px solid transparent;
    height: 100%;
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
}

只使带有文本区域的 div 可滚动，而不是 div 和顶部 div 的容器。当您使用键盘滚动时，textarea 与其顶部之间的填充仍然不可见，但至少所有 textarea 都会。

想不出更好的办法了。