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>

列印頁面