Scroll window to current line of contenteditable block

Question

I've got a very simple form with sticky footer

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

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

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

And when text reaches footer, it goes under it

So I am searching for a simple solution to auto scroll window if some content is overlapped while typing

EDIT

I guess it is not a problem if contenteditable div has its own scroll bar, but is there a solution for global scrollbar?

Answer 1

Try 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 is creating divs for every linebreak. We're simply scrolling to the last child of the whole editable area.