-1

Tengo en un div, muchos inputs. Intento que si apreto un input ( lo enfoco), el scrollbar, se mueva de manera que el input quede siempre almedio, excepto en los extremos, que es donde no se puede mover más, pero en los otros caso sí, es como cuando uno está navegando por una web y el contenido que desea ver lo deja al centro moviendo el scroll, lo mismo pero automático, esto intenté:

window.addEventListener("DOMContentLoaded",focusMe);
function focusMe(){
 var i = 0, d = document, inp = Array.from(d.getElementsByTagName("input")), max = inp.length,
sdiv = d.getElementById("main");
 
for(;i<max;i++){
 var e = inp[i],
 equation = 
 e.addEventListener("focus", ()=>{
 sdiv.scrollTo(0,sdiv.clientHeight - sdiv.scrollHeight);
 });
}
 
}
#main {
 width: 200px;
 height: 200px;
 overflow: auto;
}
<div id="main">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
</div>

1 respuesta 1

3

Estabas muy cerca de lograrlo, lo único que debías hacer era capturar la altura a la que se encontraba el div al cual le colocaste el foco y restarle la mitad de la altura total de su contenedor padre, espero haberme hecho entender, igual acá te dejo el ejemplo funcional para que lo puedas analizar:

window.addEventListener("DOMContentLoaded",focusMe);
function focusMe(){
 var i = 0, d = document, inp = Array.from(d.getElementsByTagName("input")), max = inp.length,
sdiv = d.getElementById("main");
 
for(;i<max;i++){
    var e = inp[i],
    equation = 
    e.addEventListener("focus", (e)=>{
        var elemento = e.srcElement;
        sdiv.scrollTo(0, elemento.offsetTop - (sdiv.clientHeight / 2));
    });
}
 
}
#main {
 width: 200px;
 height: 200px;
 overflow: auto;
}
<div id="main">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
<input type="text" placeholder="Stackoverflow">
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.