Optimisation du défilement synchronisé et résolution de Firefox
Lors de la mise en œuvre du défilement synchronisé à l'aide de jQuery, il est crucial de résoudre deux problèmes potentiels :
1. Synchronisation des disparités de taille
Pour tenir compte des différentes tailles de DIV, déterminez le pourcentage de contenu défilé :
percentage = element.scrollTop / (element.scrollHeight - element.offsetHeight)
Multipliez les autres DIV (scrollHeight - offsetHeight) par ce pourcentage pour obtenir un défilement proportionnel.
2. Firefox Scroll Loop
Firefox peut déclencher une boucle infinie d'événements de défilement. Pour éviter cela, dissociez temporairement l'écouteur, définissez le scrollTop et reliez-le :
<code class="javascript">var $divs = $('#div1, #div2'); var sync = function(e){ var $other = $divs.not(this).off('scroll'), other = $other.get(0); var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight); other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight); setTimeout( function(){ $other.on('scroll', sync ); },10); } $divs.on( 'scroll', sync);</code>
Cette approche facilite le défilement dans Firefox et évite le problème de boucle infinie. Une démonstration en direct est disponible sur :
[http://jsfiddle.net/b75KZ/5/](http://jsfiddle.net/b75KZ/5/)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!