Dom flickering

Par Franck, . Lien permanent Brèves

Entête large du thème Ensemble, juin 2021
Entête large du thème Ensemble

Pas moyen d’empêcher le clignotement de l’entête, quand, lorsque je défile vers le bas, il arrive au seuil de déclenchement pour le passage à la version étroite.

Entête étroite du thème Ensemble, juin 2021
Entête étroite du thème Ensemble

En vidéo ça donne ceci :

J’ai testé à peu près tout ce que j’ai pu trouver sur le net pour régler ça, en particulier une pause de 200ms avant de basculer de classe côté javascript — celle qui contrôle l’aspect et la taille de l’entête — mais rien à faire, ça continue à clignoter dès que j’atteint le seuil, et quel que soit le-dit seuil ; très étrange…

Du coup je suis revenu à quelque chose de plus standard, sans changement d’aspect et j’ai conservé l’entête étroite avec un futur menu dépliant probablement vers la droite. Genre mobile first donc !

Et comme souvent, ça m’agaçait de pas trouver une solution et hop, le code qui fonctionne :

'use strict';

function sleep(time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

var breakpoint = null;

document.addEventListener('DOMContentLoaded', function () {
  breakpoint = document.querySelector('.header').offsetHeight;
});

window.addEventListener('scroll', function () {
  let header = document.querySelector('.header');
  if (breakpoint > 0) {
    if (window.pageYOffset >= breakpoint) {
      sleep(200).then(() => {
        header.classList.add('shrink');
        breakpoint = header.offsetHeight;
      });
    } else if (window.pageYOffset < breakpoint) {
      sleep(200).then(() => {
        header.classList.remove('shrink');
        breakpoint = header.offsetHeight;
      });
    }
  }
});

Forcément si je change la hauteur de l’entête, la position de défilement de la page est modifiée en conséquence et ça je ne l’avais pas pris en compte…

C’est malin, maintenant j’hésite entre l’entête étroite en permanence ou le basculement pendant le défilement ; vous avez une préférence vous ?

À tester ici.

Et sur les conseils de biou et nicod un code « débouncé » :

'use strict';

let ensemble = {
  breakpoint: null,   // Height of current header, in pixels
  timerId: null,

  debounceFunction: function (func, delay) {
    if (ensemble.timerId) {
      clearTimeout(ensemble.timerId);
    }
    ensemble.timerId = setTimeout(func, delay);
  },

  doShrinkHeader: function () {
    let header = document.querySelector('.header');
    if (ensemble.breakpoint > 0) {
      if (window.pageYOffset >= ensemble.breakpoint) {
        header.classList.add('shrink');
        ensemble.breakpoint = header.offsetHeight;
      } else if (window.pageYOffset < ensemble.breakpoint) {
        header.classList.remove('shrink');
        ensemble.breakpoint = header.offsetHeight;
      }
      document.querySelector('html').style.scrollPaddingTop = `${ensemble.breakpoint + 24}px`;
    }
  },
};

// Get current height of header
document.addEventListener('DOMContentLoaded', () => ensemble.breakpoint = document.querySelector('.header').offsetHeight);

// Watch page scrolling and (un)shrink header if necessary
window.addEventListener('scroll', () => ensemble.debounceFunction(ensemble.doShrinkHeader, 200));

Ajouter un commentaire

Les champs suivis d'un * sont obligatoires

Les commentaires peuvent être formatés en utilisant la syntaxe Markdown Extra.

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/14996

Haut de page