0
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];
    e.addEventListener("focus", (e)=>{
        var elemento = e.srcElement;
        sdiv.scrollTo(0, elemento.offsetTop - (sdiv.clientHeight / 2));

console.log(elemento.offsetTop)
    });
}

}

Por que al mostrar los valores del offsetTop , que me muestra la distancia en pixeles del top de su elemento padre, no debería ser una secuencia del mismo número inicial ? osea 8,16,24,32,40, etc.

Pero aveces suma 21, después más o menos, por qué?

5
  • Que extraño, acabé de correr el ejemplo que hice en la respuesta anterior y en mi caso siempre suma 26 sin importar a que input le de el foco Commented el 9 nov. 2017 a las 17:11
  • Redondeo de decimales? Commented el 9 nov. 2017 a las 17:27
  • Suma diferentes números, como si de numeros random tratara, pero aunque sé que no son random, así lo parecen y nosé porque
    – ESCM
    Commented el 9 nov. 2017 a las 20:22
  • @EduardoSebastian puedes decir que pretendes lograr con tu codigo? mover el scroll? Commented el 26 nov. 2017 a las 14:51
  • No pretendo nada, solo informarme por qué los valores
    – ESCM
    Commented el 26 nov. 2017 a las 15:46

1 respuesta 1

1
+100

tomaste en cuenta los valores del border? o margin de cada elemento ? Te muestro un ejemplo en donde cada elemento tiene una altura de 20px, osea al dar foco en cada input debería informar una secuencia de 0,20,40,60 ...

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];
    e.addEventListener("focus", e => {
      
      var elemento = e.srcElement;
      sdiv.scrollTo(0, elemento.offsetTop - sdiv.clientHeight / 2);

      console.log(elemento.offsetTop);
    });
  }
}
*,*:before,*:after{
  padding:0;
  margin:0;
}
input{
  border:0;
  height: 20px;
  width:200px;
  display:block;
  background:gray;
  box-shadow: inset 0 0 0 2px red;
}
<div id="main">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
</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.