Perché la barra di scorrimento verticale si sposta automaticamente?

Non capisco perché la barra di scorrimento verticale si sposti automaticamente nella posizione più alta quando si fa clic su "Linea 9", ad esempio. Ulteriori clic non sposta la barra di scorrimento. Qualcuno potrebbe spiegare perché e come risolvere questo problema? Io lavoro con Firefox 3.6.3.Perché la barra di scorrimento verticale si sposta automaticamente?

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; 
}

fonte

2010-05-16 Misha Moroshko

Interessante. Sembra che ci sia lo stesso problema con Opera 10.53. IE8 e Chrome funzionano comunque senza problemi. –

Dopo aver eseguito alcuni test di prova e di errore, sembra che questo sia correlato al momento in cui il browser ricalcola e ridisegna la tabella quando si effettua lo sbiadimento/dissolvenza di una cella. Non c'è niente di sbagliato nel tuo codice, e jQuery sta commutando correttamente la proprietà 'display' della cella - sembra che sia un bug secondario in FF.

Probabilmente il modo più semplice intorno ad esso è quello di evitare la commutazione celle della tabella se stessi, e invece alternare il contenuto della cella di column2, in questo modo:

<!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>

Quindi, lo script aggiunge la cellula column2, e che rimane visibile per tutto il tempo - invece mostriamo/nascondiamo il <span class="details"> al suo interno. Ho provato questa versione in FF 3.6.3 e si comporta come dovrebbe!

Oh - e ho ripulito i selettori jQuery per prestazioni migliori. Se vuoi maggiori informazioni sul perché, fammi sapere!

fonte

2010-05-20 15:50:21 Beejamin

Bel trucco, ma non risolve completamente il mio problema. Nel mio caso, '.column2' ha un' width' fisso e un 'background-color'. Se aggiungi questi attributi al codice CSS, vedrai il 'background-color' anche quando l'estensione dei dettagli non viene visualizzata. Modificherò la domanda di conseguenza. Inoltre, fammi sapere perché i tuoi selettori jQuery hanno prestazioni migliori della mia. –

Appare anche in Opera. –

OK - Penso che, per rimuovere la fonte del problema, column2 dovrà essere visibile in ogni momento.La mia convinzione è che è la rappresentazione e il nascondersi della cellula che è la causa diretta - ecco perché: A differenza della maggior parte degli elementi, i TD hanno interdipendenze con gli elementi che li circondano. La dimensione di una cella può dipendere dalle larghezze di entrambe le altre celle nella stessa riga e altre nella stessa colonna. Se aggiungi una nuova cella (tramite .fadeIn()), il browser deve ricalcolare le dimensioni di alcune o tutte le altre celle nella tabella. (continua) – Beejamin

ho copiato e ha cercato il tuo codice, su Firefox 3.6.3 e Chrome 5.0.375.29. E non ho visto nulla di quello che hai descritto così sono in perdita.

La barra di scorrimento si spostava solo quando si scorre normalmente, non quando si fa clic sul testo.

fonte

2010-05-16 15:51:15 Mattijle

Molto strano ... Sei sicuro di aver cliccato su "Linea 9"? Ecco i passaggi per vedere il problema: (1) (Ri) Caricare la pagina (2) Spostare la barra di scorrimento per vedere "Linea 9" (3) Fare clic su "Linea 9". Dopo questo clic la barra di scorrimento viene spostata automaticamente in modo tale che vedo solo "Linea 0", "Linea 1", "Linea 2" e "Linea 3". Sono l'unico che ha riscontrato questo problema? –

@Misha Ah, ora che ho seguito le tue istruzioni lo vedo. Tuttavia, per risolvere il problema, ho modificato .fadeIn() e .fadeOut su .css ("display", "block") e .css ("display", "none") e lo scorrimento ha iniziato a funzionare come previsto . – Mattijle

Mattijle: l'impostazione delle celle della tabella su "display: block" comporterà il problema, ma causerà altri problemi, poiché le celle non fanno più parte della struttura della tabella. Penso che questo semplice esempio non mostri questi problemi, ma non è una buona idea in uno scenario di vita reale. Quando si fadeIn() o fadeOut() una cella di tabella con jQuery, jQuery attiva la visualizzazione tra "nessuno" e "cella della tabella" che è corretta. – Beejamin

Perché la barra di scorrimento verticale si sposta automaticamente?

risposta

Problemi correlati