[SOLVED] How to make an automatic scroll anchored to the center of the screen?

How to make an automatic scroll anchored to the center of the screen?

How can I make a text input field with the same convenient automatic scrolling as from this video?

I deliberately uploaded a short video from a private YouTube link, because it will be much easier for you to understand if you see it than if I try to explain in words

In short, the video shows how the text input field ( in red border) automatically increases its height in proportion to the height of the text in it (

tags with blue border). In addition, the page automatically scrolls down so that the user sees the text always approximately in the center of the screen while typing.

From the source code, I found out that the developer uses the Quill.js library, but I did not find anything in it that could affect scrolling. In addition, I need to implement this in React and I'm completely confused how to do it

Example

I tried to use Quill.js, Draft.js, Editor.js and other libraries for browser-based text editors but unfortunately, I did not find the scroll setting function in any of them

Solution

With the creativity of scrollIntoView function and a container that has more height than necessary, you should be able to achieve it by over-scrolling, sample here:

function createInput() {
  const input = document.createElement('input');
  input.addEventListener('keyup', (ev) => {
    if (ev.code !== 'Enter') return;
    createInput();
  });
  document.getElementById('container').appendChild(input);
  input.focus();
  input.scrollIntoView({
    behavior: 'smooth',
    block: 'center',
    inline: 'center',
  });
}
createInput();

input {
  display: block;
}
#container {
  padding-bottom: 100vh;
}

<div id="container"></div>

(Press Enter key to see it happens in real-time)