Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
overflow-anchor
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Dieoverflow-anchor-Eigenschaft vonCSS bietet eine Möglichkeit, das Scrollanker-Verhalten des Browsers zu deaktivieren, das die Scrollposition anpasst, um Inhaltsverschiebungen zu minimieren.
Das Scrollanker-Verhalten ist in jedem Browser, der es unterstützt, standardmäßig aktiviert. Daher ist es in der Regel nur erforderlich, den Wert dieser Eigenschaft zu ändern, wenn Sie Probleme mit dem Scrollanker in einem Dokument oder einem Teil des Dokuments haben und das Verhalten deaktivieren müssen.
Probieren Sie es aus
overflow-anchor: auto;overflow-anchor: none;<section> <div> <button type="button">Start lottery</button> <p>Magic numbers for today are:</p> <div></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>New Magic Number: ${magicNumber}</div>`, );}button.addEventListener("click", () => { if (example.classList.contains("running")) { example.classList.remove("running"); button.textContent = "Start lottery"; clearInterval(intervalId); } else { example.classList.add("running"); button.textContent = "Stop lottery"; setInitialState(); intervalId = setInterval(addContent, 1000); }});Syntax
/* Keyword values */overflow-anchor: auto;overflow-anchor: none;/* Global values */overflow-anchor: inherit;overflow-anchor: initial;overflow-anchor: revert;overflow-anchor: revert-layer;overflow-anchor: unset;Werte
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
overflow-anchor =
auto|
none
Beispiele
Scrollanker verhindern
Um das Scrollanker-Verhalten in einem Dokument zu verhindern, verwenden Sie dieoverflow-anchor-Eigenschaft.
* { overflow-anchor: none;}Spezifikationen
| Specification |
|---|
| CSS Scroll Anchoring Module Level 1 # exclusion-api |