Disabling Scroll Anchoring with CSS

To disable the default scroll anchoring provided by web browsers, we can use the overflow-anchor property. To disable scroll anchoring, set the overflow-anchor property to none −

body {
   overflow-anchor: none;
}

To enable the scroll anchoring, set the value to auto that is also the default value. However, scroll anchoring behavior is enabled by default in any web browser.

Disable Scroll Anchoring

Let us see the example to disable scroll anchoring −

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         overflow-anchor: none;
      }
      div{
         display: flex;
         flex-direction: row;
      }
   </style>
</head>
<body>
   <div>
      <img src="https://images.unsplash.com/photo-1613061588991-6dd130548bc7?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=160" />
      <img src="https://images.unsplash.com/photo-1612129717112-9d1274034547?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=160" />
      <img src="https://images.unsplash.com/photo-1613079936591-8ce270890241?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=160" />
      <img src="https://images.unsplash.com/photo-1612454902143-328050834c9e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=160" />
   </div>
   <h2>Test overflow</h2>
</body>
</html>

Disable Scroll Anchoring for a div

Let us see another example that will push the text down when buttons are clicked to create new boxes after scrolling −

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      #box {
         width: 320px;
         aspect-ratio: 1;
         padding: 3px;
         border: dotted black 2px;
         background-color: red;
         overflow: scroll;
         overflow-anchor: none;
      }
      .mydiv1{
         background-color: blue;
         width: 90%;
         margin: 5px;
         padding: 3px;
         aspect-ratio: 4/1;
      }
      .mydiv2{
         background-color: orange;
         width: 70%;
         margin: 5px;
         padding: 3px;
         aspect-ratio: 4/1;
      }
   </style>
</head>
<body>
   <h3>Demo Text</h3>
   <p>Click the buttons and create  new boxes.</p>
   <div id="box">
      <div id="myBox"></div>
      <h4>Click the button after scrolling down</h4>
      <p>Sed a eros tellus. Cras et ex maximus, facilisis lacus nec, faucibus magna. Pellentesque accumsan ligula eu ex fermentum pharetra. Etiam pulvinar ipsum eu ullamcorper sodales. Cras mollis interdum dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla venenatis in ligula ut tempus.</p>
      <p>Phasellus ullamcorper porta scelerisque. Sed nec tellus sed nisi cursus consequat placerat non velit. Morbi sed pharetra massa. In viverra porta lacus, eu congue purus auctor nec. Aliquam varius mauris eu nulla bibendum varius quis non justo. Donec semper risus ut leo aliquam rhoncus. Maecenas pretium aliquam odio. Donec varius hendrerit enim eget posuere. Cras eu ullamcorper nisi. Donec lacinia faucibus tellus, sollicitudin facilisis magna bibendum a. Fusce eu tortor elit. Curabitur et rhoncus massa.
      </p>
      <button onclick="newBox1()">Create a new blue box</button>
      <p>Suspendisse laoreet lorem eget mauris condimentum aliquam. Vivamus quis aliquam elit, quis hendrerit lectus. Sed hendrerit at augue non pharetra. Vestibulum congue vehicula metus, vitae varius nisi tincidunt ac. Praesent in augue a mi ultricies porttitor quis quis nunc. Maecenas neque ligula, bibendum id hendrerit vel, pellentesque at orci. Donec in nisi non leo euismod blandit et a enim. Vestibulum vestibulum ante efficitur, euismod sapien eu, tincidunt ex. Duis vehicula, tellus id volutpat viverra, quam diam scelerisque neque, quis suscipit enim sem a dui. Proin pharetra in ligula id vulputate. Aliquam a pellentesque justo, non suscipit sapien. Curabitur a semper arcu.
      </p>
      <button onclick="newBox2()">Create a new orange box</button>
   </div>
   <script>
      function newBox1(){
         let newBoxesDiv = document.querySelector("#myBox");
         let newDiv = document.createElement("div");
         newDiv.className = "mydiv1";
         newBoxesDiv.appendChild(newDiv);
      }
      function newBox2(){
         let newBoxesDiv = document.querySelector("#myBox");
         let newDiv = document.createElement("div");
         newDiv.className = "mydiv2";
         newBoxesDiv.appendChild(newDiv);
      }
   </script>
</body>
</html>

Updated on: 01-Nov-2023

375 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements