滚动窗口到可内容块的当前行

Question

我有一个很简单的有粘性页脚的表格

<div contenteditable>Start typing ...</div>

<div class="sticky-footer">
  <button>Submit</button>
</div>

https://codepen.io/anon/pen/vaNgQV

当文本到达页脚时，它就在它下面。

因此，如果某些内容在键入时重叠，则我正在寻找自动滚动窗口的简单解决方案。

编辑

如果contenteditable div有自己的滚动条，我想这不是一个问题，但是有一个全局滚动条的解决方案吗？

Answer 1

试试https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

const el = document.querySelector('[contenteditable]')
el.addEventListener('keyup', ({target: {lastChild}}) => lastChild.scrollIntoView())

https://codepen.io/wintercounter/pen/pZjeLW

Contenteditable是为每一行创建div。我们只是滚动到整个可编辑区域的最后一个孩子。

Answer 2

也许在style="overflow: scroll";上使用<div contenteditable>Start typing ...</div>

<div contenteditable style="overflow: scroll";>Start typing ...</div>

<div class="sticky-footer">
  <button>Submit</button>
</div>

Answer 3

我在这里对你的代码做了一些修改。

点击这里查看

<div contenteditable class="editableContent">Start typing ...</div>

<div class="sticky-footer">
  <button>Submit</button>
</div>


.sticky-footer {
 position:sticky;
 bottom:0;
 padding:20px 0;
 background:#eee
 }

 .editableContent{

  min-height: 30px;
  overflow: auto;
  max-height: 50px;
  }