overflow-anchor
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die overflow-anchor CSS Eigenschaft bietet eine Möglichkeit, das Scroll-Ankerverhalten des Browsers zu deaktivieren, das die Scrollposition anpasst, um Inhaltsverschiebungen zu minimieren.
Das Scroll-Ankerverhalten ist standardmäßig in jedem Browser aktiviert, der es unterstützt. Daher ist es in der Regel nur erforderlich, den Wert dieser Eigenschaft zu ändern, wenn Sie Probleme mit dem Scroll-Ankerverhalten in einem Dokument oder in einem Teil eines Dokuments haben und das 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);
}
window.addEventListener("load", () => {
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
css
/* 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.
css
* {
overflow-anchor: none;
}
Spezifikationen
| Specification |
|---|
| CSS Scroll Anchoring Module Level 1 # exclusion-api |
Browser-Kompatibilität
BCD tables only load in the browser