javascript - 将窗口滚动到 contenteditable block 的当前行

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。我们只是滚动到整个可编辑区域的最后一个子区域。