CSS - overflow-anchor 属性_CSS 菜鸟教程

称为 Scroll Anchoring 的功能是一项浏览器功能。此功能试图防止一种常见情况，即在 DOM 完全加载之前，您可能会向下滚动网页，并且加载到当前位置上方的任何元素都会将您进一步推向页面下方。

CSS overflow-anchor 属性可用于防止此浏览器功能在加载新内容时自动滚动页面。如果加载新内容时，页面不会向上或向下滚动。

可能的值

auto −调整滚动位置时，该元素将成为潜在的锚点。
none -该元素不会被选为潜在锚点，从而允许内容重排。

适用于

所有 HTML 元素。

DOM 语法

object.style.overflowAnchor = "auto|none";

Safari 浏览器不支持属性 overflow-anchor。

CSS overflow-anchor - none 值

以下示例设置 overflow-anchor： none。当我们单击该按钮时，我们可以看到上面创建的新框如何将文本向下推。

<html>
<head>
<style>
	 	.container-overflow {
	 	 	 padding: 2px;
	 	 	 width: 280px;
	 	 	 aspect-ratio: 1;
	 	 	 border: 3px solid #2d7742;
	 	 	 overflow: scroll;
	 	 	 overflow-anchor: none;
	 	 	 display: flex;
	 	 	 flex-direction: column;
	 	 	 align-items: center;
	 	 	 background-color: #2fe262;
	 	}
	 	.box {
	 	 	 background-color: #D90F0F;
	 	 	 width: 150px;
	 	 	 height: 20px;
	 	 	 margin: 5px;
	 	 	 padding: 5px;
	 	 	 text-align: center;
	 	 	 aspect-ratio: 4/1;
	 	}
	 	h4 {
	 	 	 text-align: center;
	 	 	 color: #1c0fd9;
	 	}
	 	button {
	 	 	 background-color: #e5e90f;
	 	 	 border: none;
	 	 	 padding: 10px;
	 	 	 border-radius: 5px;
	 	 	 font-size: medium;
	 	}
</style>
</head>
<body>
	 	<p>Click the button to create a new text boxes. The new text boxes will push the existing text down.</p>
	 	<div class="container-overflow">
	 	 	 <div id="newText"></div>
	 	 	 <h4>qikepu CSS Overflow-anchor</h4>
	 	 	 <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites</p>
	 	 	 <button onclick="addText()">Click me</button>
	 	</div>

	 	<script>
	 	 	 function addText(){
	 	 	 	 	let newTextBox = document.querySelector("#newText");
	 	 	 	 	let newTextDiv = document.createElement("div");
	 	 	 	 	newTextDiv.className = "box";
	 	 	 	 	newTextBox.appendChild(newTextDiv);
	 	 	 }
	 	</script>
</body>
</html>

CSS overflow-anchor - auto 值

以下示例展示了如何使用 overflow-anchor： auto 属性来使用其默认的滚动锚定行为。在这里，我们看到单击按钮（click me）时，新文本框被添加到按钮上方。属性 overflow-anchor：当 DOM 中当前位置上方的 DOM 发生更改时，自动锁定用户在页面上的位置。这允许用户保持锚定在页面上的位置，即使新元素被加载到 DOM 中也是如此。

<html>
<head>
<style>
	 	.container-overflow {
	 	 	 padding: 2px;
	 	 	 width: 280px;
	 	 	 aspect-ratio: 1;
	 	 	 border: 3px solid #2d7742;
	 	 	 overflow: scroll;
	 	 	 overflow-anchor: auto;
	 	 	 display: flex;
	 	 	 flex-direction: column;
	 	 	 align-items: center;
	 	 	 background-color: #2fe262;
	 	}
	 	.box {
	 	 	 background-color: #D90F0F;
	 	 	 width: 150px;
	 	 	 height: 20px;
	 	 	 margin: 5px;
	 	 	 padding: 5px;
	 	 	 text-align: center;
	 	 	 aspect-ratio: 4/1;
	 	}
	 	h4 {
	 	 	 text-align: center;
	 	 	 color: #1c0fd9;
	 	}
	 	button {
	 	 	 background-color: #e5e90f;
	 	 	 border: none;
	 	 	 padding: 10px;
	 	 	 border-radius: 5px;
	 	 	 font-size: medium;
	 	}
</style>
</head>
<body>
	 	<p>Click the button to add a new text box. The existing text will stay visible (when you set overflow-anchor: auto) even if you add new text boxes.</p>
	 	<div class="container-overflow">
	 	 	 <div id="newText"></div>
	 	 	 <h4>qikepu CSS Overflow-anchor</h4>
	 	 	 <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites</p>
	 	 	 <button onclick="addText()">Click me</button>
	 	</div>
	 	<script>
	 	 	 function addText(){
	 	 	 	 	let newTextBox = document.querySelector("#newText");
	 	 	 	 	let newTextDiv = document.createElement("div");
	 	 	 	 	newTextDiv.className = "box";
	 	 	 	 	newTextBox.appendChild(newTextDiv);
	 	 	 }
	 	</script>
</body>
</html>

<< CSS - outline-width 属性 CSS - overflow-wrap 属性 >>