How to keep the scroll level in the chat while focusing on input on the mobile version?

Question

Sample page: https://codesandbox.io/s/summer-flower-uxw47?file=/index.html:4175-4223

What is the problem? The problem is that when you go in from the phone and press the input, the keyboard appears. And if the text in the main part of the chat was at the same level, then when the keyboard was opened, it was already at a different level.

Answer 1

If you want to always be scrolled to the bottom, you can try the following:

const onInput = (e) => {
  const
    input = e.target,
    container = input.closest(".container"),
    scroll = container.querySelector(".scroll");

  input.style.height = "auto";
  input.style.height = input.scrollHeight + "px";

  // See: https://stackoverflow.com/a/33193694/1762224
  scroll.scrollTop = scroll.scrollHeight - scroll.clientHeight;
};

document.querySelectorAll("textarea").forEach((textArea) => {
  Object.assign(textArea.style, {
    height: `${textArea.scrollHeight}px`,
    overflowY: "hidden"
  });
  textArea.addEventListener("input", onInput);
});