overflow-anchor

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

La propriété CSS overflow-anchor permet de désactiver le comportement d'ancrage du défilement du navigateur, qui ajuste la position de défilement pour minimiser les déplacements de contenu.

Le comportement d'ancrage du défilement est activé par défaut dans tous les navigateurs qui le prennent en charge. Par conséquent, il est généralement nécessaire de modifier la valeur de cette propriété uniquement si vous rencontrez des problèmes d'ancrage du défilement dans un document ou une partie d'un document et que vous devez désactiver ce comportement.

Exemple interactif

overflow-anchor: auto;

overflow-anchor: none;

<section class="default-example" id="default-example">
  <div class="whole-content-wrapper">
    <button id="playback" type="button">Démarrer la loterie</button>
    <p>Les numéros magiques pour aujourd'hui sont&nbsp;:</p>
    <div id="example-element"></div>
  </div>
</section>

.whole-content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

#example-element {
  height: 100%;
  border: 2px dashed dodgerblue;
  padding: 0.75em;
  text-align: left;
  overflow: scroll;
}

#playback {
  font-size: 1em;
  width: 10em;
  height: 4em;
  font-weight: bold;
  margin: 1em auto;
  background-color: aliceblue;
  border: solid 2px dodgerblue;
  border-radius: 5px;
}

#playback:hover {
  border-color: lightseagreen;
}

#playback:active {
  filter: brightness(0.9);
}

const example = document.getElementById("example-element");
const button = document.getElementById("playback");
let intervalId;

function setInitialState() {
  example.innerHTML = "";
  Array.from({ length: 10 }, (_, i) => i).forEach(addContent);
  example.scrollTop = example.scrollHeight;
}

function addContent() {
  console.log("adding content");
  const magicNumber = Math.floor(Math.random() * 10000);
  example.insertAdjacentHTML(
    "afterbegin",
    `<div class="new-content-container">Nouveau numéro magique : ${magicNumber}</div>`,
  );
}

button.addEventListener("click", () => {
  if (example.classList.contains("running")) {
    example.classList.remove("running");
    button.textContent = "Démarrer la loterie";
    clearInterval(intervalId);
  } else {
    example.classList.add("running");
    button.textContent = "Arrêter la loterie";
    setInitialState();
    intervalId = setInterval(addContent, 1000);
  }
});

Syntaxe

css

/* Valeurs avec un mot-clé */
overflow-anchor: auto;
overflow-anchor: none;

/* Valeurs globales */
overflow-anchor: inherit;
overflow-anchor: initial;
overflow-anchor: revert;
overflow-anchor: revert-layer;
overflow-anchor: unset;