En este caso, lo que puedes hacer es jugar con scrollTo()
, scrollBy()
o scrollIntoView()
.
Te recomiendo que primero intentes con scrollBy
y scrollIntoView
, si ninguno de ambos te funciona, la solución está en implementar scrollTo()
con una simple fórmula:
scrollTo( posición de scroll + window offset top de elemento hijo (input) - espacio top )
que implementado en js sería así:
const elPos = input.getBoundingClientRect().top;
const scrollPos = screen.scrollTop;
screen.scrollTo({top: elPos - scrollPos - 20, behavior: "smooth"});
Mira este demo, en este caso he implementado esta fórmula simple y el input siempre queda visible. https://codepen.io/kabal/pen/eYmNLeE