Javascript Girl
  1. Javascript Girl
  3. Pourquoi la barre de défilement verticale se déplace automatiquement?
Intereting Posts
Continuez à avoir déconnecté! Erreur Rupture de ligne dans l'étiquette de catégorie du tableau kendo-ui Javascript pour convertir UTC en heure locale Passer un tableau via AJAX de php vers javascript Angular 2 router.navigate AddEventListener charge sur ajax load SANS jquery Imprimer le contenu de la toile Définition des en-têtes dans XDomainRequest ou ActiveXObject ('Microsoft.XMLHTTP') Comment personnaliser Bootstrap typeahead layout / function pour plus que simplement du texte? Comment obtenir la différence de deux dates en format mm-dd-hh en Javascript Contexte reliant lorsque vous appelez la méthode ES6. Comment accéder à l'objet à partir de la méthode appelée appel de rappel? Pourquoi 0 est-il syntaxiquement valide? RequireJS: Multiple main.js? Transfert de données de JavaScript vers PHP Cliquez sur les événements sur les éléments qui se chevauchent

Pourquoi la barre de défilement verticale se déplace automatiquement?

Je ne comprends pas pourquoi la barre de défilement verticale se déplace automatiquement vers la position la plus haute lorsque "Line 9" a cliqué, par exemple. D'autres clics ne déplacent pas la barre de défilement. Quelqu'un pourrait-il expliquer pourquoi et comment réparer cela? Je travaille avec Firefox 3.6.3.

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

Après avoir effectué des tests d'essai et d'erreur, il semble que cela soit lié au moment où le navigateur recalcule et redessine le tableau lorsque vous disparaissez / disparaissez une des cellules. Il n'y a rien de mal avec votre code, et jQuery passe correctement la propriété 'affichage' de la cellule. Il semble que ce soit un bug mineur dans FF.

Probablement, le moyen le plus simple est d'éviter de basculer les cellules de table elles-mêmes et plutôt de basculer le contenu de la cellule de la colonne2, de la manière suivante: 

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

Donc, le script ajoute la cellule de la colonne2, et ça reste visible tout au long du temps. Au lieu de cela, nous montrons / cachons le <span class="details"> . J'ai testé cette version dans FF 3.6.3 et ça se comporte comme il se doit!

Oh – et j'ai nettoyé vos sélecteurs jQuery pour une meilleure performance. Si vous voulez plus d'informations sur pourquoi, laissez-moi savoir!

J'ai copié et essayé votre code, sur Firefox 3.6.3 et Chrome 5.0.375.29. Et je n'ai vu rien de ce que vous avez décrit, donc je suis en perte.

La barre de défilement n'a été déplacée que lorsque vous faites défiler normalement, et non en cliquant sur le texte.