CSS - overflow-anchor Property

A feature called Scroll Anchoring is a browser feature. This feature attempts to prevent a common situation where, before the DOM has fully loaded, you may scroll down a webpage and any elements that load above your current location push you further down the page.

CSS overflow-anchor property can be used to prevent this browser feature from automatically scrolling the page when new content is loaded. The page will not scroll up or down if new content is loaded above or below the current scroll position.

Possible Values

  • auto − The element becomes a potential anchor when adjusting scroll position.

  • none − The element won't be selected as a potential anchor, allowing content to reflow.

Applies to

All the HTML elements.

DOM Syntax

object.style.overflowAnchor = "auto|none";
Property overflow-anchor is not supported on Safari browser.

CSS overflow-anchor - none Value

The following example sets overflow-anchor: none. When we click the button, we see how the new boxes created above pushes the text down.

<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 Value

The following example shows how we can use overflow-anchor: auto property to use its default scroll anchoring behavior. Here we see on click of the button (click me), new text box gets added above the button. Property overflow-anchor: auto locks the user’s position on the page while changes are taking place in the DOM above the current location. This allows the user to stay anchored where they are on the page even as new elements are loaded to the 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>
Advertisements