Comment résoudre le problème de la gigue de page causée par la définition dynamique des éléments fixés en JavaScript?

JavaScript définir dynamiquement la gigue de page causée par l'élément fixe et les solutions

Dans JavaScript, position: fixed en fonction des événements de défilement de la fenêtre peut provoquer une gigue de page. En effet Voici un scénario commun:

 window.addeventListener ('Scroll', this.handletabfix);

HandletAbFix () {
  Let timeout = null;
  ClearTimeout (temps mort);
  timeout = setTimeout (() => {
    const ScrollTop = window.pageyoffset || document.DocumentElement.ScrollTop || document.body.scrolltop;
    const offSetTop = document.QuerySelector ('# testnavbar') ?. OffsetTop 60;
    this.isfixtab = scrolltop> offsetOp;
    // Lorsque ce.isfixtab est vrai, définissez l'élément pour fixer
  }, 1000);
}

Dans le code, l'événement Scroll déclenche la fonction handleTabFix et détermine s'il faut définir l'élément sur fixed en fonction de la position de défilement. Cependant, cette approche peut entraîner des changements répétés de la hauteur de la page, provoquant des tremblements.

Ce type de gigue est généralement parce qu'une fois l'élément fixed , la hauteur du contenu de la page diminue, provoquant la recalcule de la page, ce qui déclenche à son tour la mise à jour de publication et répète le cycle.

Il existe deux solutions principales:

1. position: sticky : modifiez la méthode de positionnement de l'élément sticky . Le positionnement sticky combine les caractéristiques de relative et fixed . L'élément deviendra automatiquement fixed après avoir atteint le décalage spécifié, mais n'affectera pas la hauteur globale de la page, évitant ainsi la gigue.

2. Ajoutez un conteneur de hauteur fixe pour un élément: ajoutez un conteneur parent pour l'élément qui doit être réglé sur fixed et définissez une hauteur fixe pour le conteneur. De cette façon, même si l'élément devient fixed , le conteneur occupe toujours l'espace d'origine, empêchant la hauteur de la page de changer, éliminant ainsi la gigue.

La sélection de l'une des méthodes ci-dessus peut résoudre efficacement le problème de la gigue de page lors de la définition du positionnement de l'élément fixed dans JavaScript dynamiquement, en améliorant l'expérience utilisateur.

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!