在固定div下方的textarea中滚动到顶部

Question

情况：

1. 有一个比浏览器窗口更高的文本区域（并且文本更多）。
2. 顶部有一个position:fixed;栏。
3. 当textarea中的文本被编辑并向下滚动并且用户使用光标键滚动回文本区域的顶部时，文本区域的顶部将隐藏在顶部的＆＃34;栏后面＃34 ;

问题：如何更改布局（HTML，CSS），以便通过文本区域内的按键可以看到textarea的第一行？

我试过了：

• 向textarea添加保证金或填充
• 向包含textarea的div添加边距或填充
• 向body元素添加填充

要明确：当鼠标用于滚动到顶部时，其中一些措施可以帮助整个文本区域变得可见。应通过键盘上的光标键完全访问textarea。

演示：jsfiddle

Answer 1

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

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

使用textarea创建可滚动的div，而不是div和顶部div的容器。当您使用键盘滚动时，textarea与其顶部之间的填充仍然不可见，但至少所有textarea都会显示。

无法想出更好的方法。

Answer 2

添加默认rows和cols size

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

并删除textarea css中的height:10000px;

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

css应该像

textarea { margin-top:30px;}