html - 在固定 div 下方的文本区域中滚动到顶部

Question

情况:

1. 有一个比浏览器窗口高的文本区域(并且全是文本)。
2. 顶部有一个 position:fixed; 栏。
3. 当文本区域中的文本被编辑并向下滚动并且用户使用光标键滚动回文本区域的顶部时，文本区域的顶部隐藏在“顶部栏”后面。

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

我试过:

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

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

演示: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 都可见。

想不出更好的方法。