¿Por qué la barra de desplazamiento vertical se mueve automáticamente?

No entiendo por qué la barra de desplazamiento vertical se mueve automáticamente a la posición más superior cuando hace clic en "Línea 9", por ejemplo. Nuevos clics no mueven la barra de desplazamiento. ¿Alguien podría explicar por qué y cómo solucionarlo? Trabajo con Firefox 3.6.3.¿Por qué la barra de desplazamiento vertical se mueve automáticamente?

HTML:

<html> 
    <head> 
     <link rel="stylesheet" href="test.css" type="text/css" /> 
     <script src="http://code.jquery.com/jquery-latest.js"></script> 
     <script language="JavaScript" src="test.js"></script> 
    </head> 

    <body> 
     <div> 
      <table> 
       <tr row='0'><td class='column1'>Line 0</td></tr> 
       <tr row='1'><td class='column1'>Line 1</td></tr> 
       <tr row='2'><td class='column1'>Line 2</td></tr> 
       <tr row='3'><td class='column1'>Line 3</td></tr> 
       <tr row='4'><td class='column1'>Line 4</td></tr> 
       <tr row='5'><td class='column1'>Line 5</td></tr> 
       <tr row='6'><td class='column1'>Line 6</td></tr> 
       <tr row='7'><td class='column1'>Line 7</td></tr> 
       <tr row='8'><td class='column1'>Line 8</td></tr> 
       <tr row='9'><td class='column1'>Line 9</td></tr> 
      </table> 
     </div> 
    </body> 
</html>

JS:

$(document).ready(function() { 
    $(".column1").each(function(index) { 
     $(this).after("<td class='column2'>Details " + index + "</td>"); 
     $(this).toggle(function() { $("[row='" + index + "'] .column2").fadeIn("fast") }, 
         function() { $("[row='" + index + "'] .column2").fadeOut("fast") }); 
    }); 
});

CSS:

div { 
    overflow: auto; 
    height: 100px; 
    width: 300px; 
    border: 1px solid blue; 
} 

.column1 { 
    cursor: pointer; 
    width: 100px; 
    background-color: green; 
    color: white; 
} 

.column2 { 
    display: none; 
    width: 200px; 
    background-color: blue; 
    color: white; 
}

Fuente

2010-05-16 Misha Moroshko

interesante. Parece que hay el mismo problema con Opera 10.53. IE8 y Chrome funcionan sin problemas. –

Después de hacer algunas pruebas de ensayo y error, parece que esto está relacionado con el momento en que el navegador vuelve a calcular y se vuelve a dibujar la mesa cuando aparición/desaparición gradual a cabo una de las celdas. No hay nada de malo en su código, y jQuery está alternar correctamente la propiedad 'mostrar' de la celda, parece que es un error menor en FF.

Probablemente la forma más fácil a su alrededor es evitar alternar celdas de la tabla a sí mismos, y en lugar de cambiar el contenido de la celda columna2, así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
     <link rel="stylesheet" href="test.css" type="text/css" /> 
     <script src="http://code.jquery.com/jquery-latest.js"></script> 
     <script language="JavaScript"> 
     $(document).ready(function() { 
      $("td.column1").each(function(index) { 
       $(this).after('<td class="column2"><span class="details">Details ' + index + '</span></td>'); 
       $(this).toggle(
        function(){$(this).siblings('.column2').children('span.details').fadeIn("fast")}, 
        function(){$(this).siblings('.column2').children('span.details').fadeOut("fast")} 
       ) 
      }); 
     }); 
     </script> 
     <style type="text/css" media="screen"> 
      div { 
       overflow: auto; 
       height: 100px; 
       width: 300px; 
       border: 1px solid blue; 
      } 

      .column1 { 
       cursor: pointer; 
      } 

      .column2 .details{ 
       display:none; 
      } 

     </style> 
    </head> 

    <body> 
     <div> 
      <table> 
       <tr row='0'><td class='column1'>Line 0</td></tr> 
       <tr row='1'><td class='column1'>Line 1</td></tr> 
       <tr row='2'><td class='column1'>Line 2</td></tr> 
       <tr row='3'><td class='column1'>Line 3</td></tr> 
       <tr row='4'><td class='column1'>Line 4</td></tr> 
       <tr row='5'><td class='column1'>Line 5</td></tr> 
       <tr row='6'><td class='column1'>Line 6</td></tr> 
       <tr row='7'><td class='column1'>Line 7</td></tr> 
       <tr row='8'><td class='column1'>Line 8</td></tr> 
       <tr row='9'><td class='column1'>Line 9</td></tr> 
      </table> 
     </div> 
    </body> 
</html>

Por lo tanto, la secuencia de comandos agrega la célula columna2, y que se mantiene visible todo el tiempo, en su lugar mostramos/escondemos el <span class="details"> dentro de él. ¡He probado esta versión en FF 3.6.3 y se comporta como debería!

Oh - y yo limpiado sus selectores de jQuery para un mejor rendimiento. Si quieres más información sobre por qué, házmelo saber!

Fuente

2010-05-20 15:50:21 Beejamin

Buena solución, pero no resuelve mi problema por completo. En mi caso, '.column2' tiene un' ancho' fijo y un 'color de fondo'. Si agrega estos atributos al código CSS, verá el 'color de fondo' incluso cuando no se muestre el intervalo de detalles. Editaré la pregunta en consecuencia. Además, avíseme por qué sus selectores jQuery tienen mejor rendimiento que el mío. –

Aparece también en Opera. –

OK - Creo que, para eliminar el origen del problema, la columna 2 tendrá que estar visible en todo momento.Mi creencia es que el hecho de mostrar y ocultar la celda es la causa directa. He aquí por qué: A diferencia de la mayoría de los elementos, los TD tienen interdependencias con los elementos que los rodean. El tamaño de una celda puede depender del ancho de las otras celdas en la misma fila y otras en la misma columna. Si agrega una nueva celda (a través de .fadeIn()), el navegador necesita recalcular las dimensiones de algunas o todas las otras celdas de la tabla. (continúa) – Beejamin

he copiado e intentaron su código, en Firefox 3.6.3 y Chrome 5.0.375.29. Y no vi nada de lo que describiste, así que estoy perdido.

barra de desplazamiento sólo cuando se trasladó Habitualmente, si no cuando se hace clic sobre el texto.

Fuente

2010-05-16 15:51:15 Mattijle

Muy extraño ... ¿Estás seguro de haber hecho clic en "Línea 9"? Estos son los pasos para ver el problema: (1) (Re) Cargar la página (2) Mueva la barra de desplazamiento para ver "Línea 9" (3) Haga clic en "Línea 9". Después de este clic, la barra de desplazamiento se mueve hacia arriba automáticamente de modo que solo veo "Línea 0", "Línea 1", "Línea 2" y "Línea 3". ¿Soy el único que experimenta este problema? –

@Misha Ah, ahora que seguí tus instrucciones lo veo. Sin embargo, para solucionarlo, cambié .fadeIn() y .fadeOut a .css ("display", "block") y .css ("display", "none") y el desplazamiento comenzó a funcionar como se pretendía . – Mattijle

Mattijle: Ajuste de celdas de la tabla a 'display: block' será esquivar el problema, pero pueden causar otros problemas, ya que las células ya no son efectivamente parte de la estructura de la tabla. Creo que este simple ejemplo no muestra estos problemas, pero no es una buena idea en un escenario de la vida real. Cuando fadeIn() o fadeOut() una celda de tabla con jQuery, jQuery alterna la visualización entre 'ninguno' y 'table-cell' que es correcto. – Beejamin

¿Por qué la barra de desplazamiento vertical se mueve automáticamente?

Respuesta

Cuestiones relacionadas