overflow-anchor CSS property
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Die overflow-anchor-Eigenschaft in CSS bietet eine Möglichkeit, das Scrollverankerungsverhalten des Browsers abzulehnen, das die Scrollposition anpasst, um Inhaltsverschiebungen zu minimieren.
Das Scrollverankerungsverhalten ist standardmäßig in jedem Browser aktiviert, der es unterstützt. Daher ist eine Änderung des Werts dieser Eigenschaft in der Regel nur erforderlich, wenn Sie Probleme mit der Scrollverankerung in einem Dokument oder Teil eines Dokuments haben und diese Funktion deaktivieren müssen.
Probieren Sie es aus
overflow-anchor: auto;
overflow-anchor: none;
<section class="default-example" id="default-example">
<div class="whole-content-wrapper">
<button id="playback" type="button">Start lottery</button>
<p>Magic numbers for today are:</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">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
Diese Eigenschaft wird als eines der folgenden Schlüsselwortwerte angegeben:
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
overflow-anchor =
auto |
none
Beispiele
Verhindern der Scrollverankerung
Um die Scrollverankerung in einem Dokument zu verhindern, verwenden Sie die Eigenschaft overflow-anchor.
* {
overflow-anchor: none;
}
Spezifikationen
| Spezifikation |
|---|
| CSS Scroll Anchoring Module Level 1 # exclusion-api |