CSS 属性

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

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

属性值

  • auto -调整滚动位置时，该元素将成为潜在的锚点。

  • none: 该元素不会被选为潜在的锚点，从而允许内容重排。

适用范围

所有 HTML 元素。

DOM 语法

object.style.overflowAnchor = "auto|none";
属性overflow-anchor是Safari 浏览器不支持。

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>单击按钮创建新文本框。 新文本框会将现有文本下推。</p>
   <div class="container-overflow">
      <div id="newText"></div>
      <h4>yxjc123.com CSS Overflow-anchor</h4>
      <p>日月潭很深，湖水碧绿。湖中央有个美丽的小岛，叫光化岛。小岛把湖水分成两半，北边像圆圆的太阳，叫日潭；南边像弯弯的月亮，叫月潭。
清晨，湖面上飘着薄薄的雾。天边的晨星和山上的点点灯光，隐隐约约地倒映在湖水中。
中午，太阳高照，整个日月潭的美景和周围的建筑，都清晰地展现在眼前。要是下起蒙蒙细雨，日月潭好像披上轻纱，周围的景物一片朦胧，就像童话中的仙境。
</p>
      <button onclick="addText()">点击我</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属性使用其默认的滚动锚定行为。在这里我们看到点击按钮（点击我），新的文本框被添加到按钮上方。属性溢出锚点:当当前位置上方的 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>单击按钮添加新文本框。 即使您添加新的文本框，现有文本也将保持可见（当您设置 Overflow-anchor: auto 时）。</p>
   <div class="container-overflow">
      <div id="newText"></div>
      <h4>yxjc123.com CSS Overflow-anchor</h4>
      <p>日月潭很深，湖水碧绿。湖中央有个美丽的小岛，叫光化岛。小岛把湖水分成两半，北边像圆圆的太阳，叫日潭；南边像弯弯的月亮，叫月潭。
清晨，湖面上飘着薄薄的雾。天边的晨星和山上的点点灯光，隐隐约约地倒映在湖水中。
中午，太阳高照，整个日月潭的美景和周围的建筑，都清晰地展现在眼前。要是下起蒙蒙细雨，日月潭好像披上轻纱，周围的景物一片朦胧，就像童话中的仙境。
</p>
      <button onclick="addText()">点击我</button>
   </div>
   <script>
      function addText(){
         let newTextBox = document.querySelector("#newText");
         let newTextDiv = document.createElement("div");
         newTextDiv.className = "box";
         newTextBox.appendChild(newTextDiv);
      }
   </script>
</body>
</html>