<h1>Scroll down to see the input</h1>
<div class="container">
  <input type="email" id="email" placeholder="example@mail.com" />
</div>

*, *::before, *::after {
  box-sizing: border-box;
}

body {
	font-family: sans-serif;
}

h1 {
  font-weight:bold;
  font-size:32px;
  padding:24px;
}

.container {
	max-width: 1024px;
  width:100%;
	margin-left: auto;
	margin-right: auto;
  padding:1000px 12px;
}

input {
	display: block;
	width: 100%;
	padding: 12px;
	font-size: 16px;
}

const input = document.getElementById("email");

input.addEventListener("focus", () => {
   setTimeout(() => {
      input.scrollIntoView({
         behavior: "smooth",
         block: "center"
      });
   }, 300); // Delay helps after mobile keyboard opens
});