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 support for this feature? Tell us why.
Die overflow-anchor CSS-Eigenschaft bietet eine Möglichkeit, das Scroll-Ankerverhalten des Browsers zu deaktivieren, welches die Scroll-Position anpasst, um Inhaltsverschiebungen zu minimieren.
Das Scroll-Ankerverhalten ist standardmäßig in jedem Browser aktiviert, der es unterstützt. Daher ist es normalerweise nur erforderlich, den Wert dieser Eigenschaft zu ändern, wenn Sie Probleme mit dem Scroll-Ankerverhalten in einem Dokument oder einem Teil eines Dokuments haben und dieses Verhalten ausschalten 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
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
overflow-anchor =
auto |
none
Beispiele
Scroll-Ankerverhalten verhindern
Um das Scroll-Ankerverhalten in einem Dokument zu verhindern, verwenden Sie die overflow-anchor-Eigenschaft.
* {
overflow-anchor: none;
}
Spezifikationen
| Spezifikation |
|---|
| CSS Scroll Anchoring Module Level 1 # exclusion-api |