2 votes

La fonction css() de jQuery est lente lorsqu'elle est appliquée à un événement de défilement

J'essaie de mettre en place un simple tableau d'en-têtes fixes. Je sais que c'est théoriquement possible avec CSS uniquement, mais cela ne fonctionne pas très bien avec OSX Lion et ses barres de défilement qui disparaissent. Je le fais donc avec jQuery.

Une approche est simple, il ne s'agit que de 1,5 ligne de code :

$('.inbox').scroll(function() {

    $(this).find('.inbox-headers').css('top', $(this).scrollTop());

});

Démonstration .

Cela fonctionne bien et de manière fluide dans Firefox, mais traîne terriblement en longueur dans les navigateurs webkit. Pourquoi cela se produit-il et comment puis-je optimiser ce code ? Ou peut-être aborder le problème différemment.

8voto

Pointy Points 172438

L'événement "scroll" est déclenché très fréquemment. Il sera toujours très difficile de suivre si vous modifiez le DOM pendant le défilement dans certains navigateurs.

Ce que vous pouvez faire, c'est l'une de ces choses :

  1. Dans votre cas, position: fixed; pourrait être une bonne alternative.
  2. Si ce n'est pas le cas, faites en sorte que le gestionnaire d'événement démarre un minuteur pour 100 millisecondes dans le futur, en annulant tout minuteur précédent dans le processus. De cette manière, le DOM ne sera mis à jour qu'après l'arrêt ou la pause du défilement.
  3. Si vous voulez des mises à jour continues, gardez une trace de l'horodatage lorsque vous faites une mise à jour, et ne faites rien dans le gestionnaire si cela fait moins d'un certain temps (100ms ou autre).

0voto

Kevin Ennis Points 6061
function debounce(func, wait) {
    var timeout;
    return function() {
        var context = this, 
            args = arguments,
            later = function() {
                timeout = null;
                func.apply(context, args);
            };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}
$('.inbox').scroll(debounce(function() {
    $(this).find('.inbox-headers').css('top', $(this).scrollTop());
}, 100));

Il s'agit d'une petite fonction d'amortissement que j'utilise souvent dans ce genre de situation.

0voto

odiszapc Points 2406

La meilleure façon de réaliser un en-tête statique est de séparer strictement l'en-tête et le corps du tableau :

Vous devez ensuite appliquer un style overflow:scroll au DIV .body uniquement

  1. Pas de positionnement absolu
  2. Pas d'événements de défilement

Si votre tableau est très large, vous devez dans tous les cas utiliser défilement événements

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X