CSS - overflow-anchor 属性

一项名为滚动锚定的功能是浏览器功能。此功能旨在防止一种常见情况，即在 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>Tutorialspoint 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 属性来使用其默认的滚动锚定行为。在这里，我们看到单击按钮（点击我）后，新的文本框添加到按钮上方。属性 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>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>Tutorialspoint 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>

打印页面