Hice una caja de arena rápida aquí para demostración.
const btn = document.querySelector("button") const topTextarea = document.querySelector("#input1") topTextarea.addEventListener("change", (e) => { e.preventDefault(); e.stopPropagation() }) topTextarea.addEventListener("keyup", (e) => { // e.preventDefault(); e.stopPropagation() }) topTextarea.addEventListener("keydown", (e) => { e.preventDefault(); e.stopPropagation() }) btn.addEventListener("click", () => { topTextarea.focus({ preventScroll: true }); }) body { display: flex; justify-content: center; flex-direction: column; } textarea { height: 100px; } #demo { height: 3000px; } <textarea name="" id="input1" cols="30" rows="10">asdaasdasdsadasd</textarea> <div id="demo"></div> <button>Scroll Top element</button> <textarea name="" id="" cols="30" rows="10">Bottom</textarea>Problema: Centrarse en cualquiera de las áreas de texto de la página. Desplácese fuera de ellos (mientras están enfocados) y luego escriba algo. Ocurre el comportamiento predeterminado, la página se desplaza al elemento enfocado.
En la zona de pruebas, puede ver un botón que activa el enfoque pero evita el desplazamiento.
¿Es posible implementarlo para que cuando ocurra un cambio, impidamos el desplazamiento?
Encontré una solución.
Prevenir el evento keyDown. Reúna el carácter ingresado y actualice su 'estado'.
Y puede hacer algunos cálculos y desplazarse hasta el elemento.
En mi caso, scrollIntoView estaba causando problemas con nuestro diseño, por eso tuve que desplazarme manualmente.