Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Disabling Scroll Anchoring with CSS
To disable the default scroll anchoring provided by web browsers, we can use the overflow-anchor property. Scroll anchoring automatically adjusts the scroll position when content is added above the current viewport to maintain the user's reading position.
Syntax
selector {
overflow-anchor: value;
}
Possible Values
| Value | Description |
|---|---|
auto |
Default value. Scroll anchoring is enabled |
none |
Disables scroll anchoring behavior |
Example 1: Disable Scroll Anchoring on Body
The following example disables scroll anchoring for the entire page −
<!DOCTYPE html>
<html>
<head>
<style>
body {
overflow-anchor: none;
margin: 0;
padding: 20px;
}
.image-container {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.image-container img {
width: 100px;
height: 100px;
background-color: #ddd;
border: 2px solid #333;
}
</style>
</head>
<body>
<div class="image-container">
<img alt="Image 1" />
<img alt="Image 2" />
<img alt="Image 3" />
<img alt="Image 4" />
</div>
<h2>Scroll anchoring is disabled</h2>
<p>When content is added above this text, the scroll position may jump.</p>
</body>
</html>
A row of four placeholder images appears, followed by a heading and text. Scroll anchoring is disabled for the entire page.
Example 2: Disable Scroll Anchoring for Specific Container
This example shows how to disable scroll anchoring for a scrollable container with dynamic content −
<!DOCTYPE html>
<html>
<head>
<style>
#scrollable-box {
width: 300px;
height: 200px;
border: 2px dotted #333;
background-color: #f0f0f0;
overflow: scroll;
overflow-anchor: none;
padding: 10px;
margin: 20px;
}
.blue-box {
background-color: #4CAF50;
width: 90%;
height: 40px;
margin: 5px 0;
border-radius: 4px;
}
.orange-box {
background-color: #FF9800;
width: 70%;
height: 40px;
margin: 5px 0;
border-radius: 4px;
}
button {
padding: 8px 16px;
margin: 5px;
background-color: #2196F3;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h3>Scroll Anchoring Demo</h3>
<p>Scroll down in the box below, then click the buttons to add new elements.</p>
<div id="scrollable-box">
<div id="container"></div>
<h4>Scroll down and click buttons</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
<button onclick="addGreenBox()">Add Green Box</button>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<button onclick="addOrangeBox()">Add Orange Box</button>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</div>
<script>
function addGreenBox() {
const container = document.getElementById("container");
const newBox = document.createElement("div");
newBox.className = "blue-box";
container.appendChild(newBox);
}
function addOrangeBox() {
const container = document.getElementById("container");
const newBox = document.createElement("div");
newBox.className = "orange-box";
container.appendChild(newBox);
}
</script>
</body>
</html>
A scrollable container with text and buttons appears. When you scroll down and click the buttons, new colored boxes are added at the top without maintaining the scroll position due to disabled scroll anchoring.
Conclusion
The overflow-anchor property controls scroll anchoring behavior. Setting it to none disables the automatic scroll position adjustment when content changes, which can be useful for dynamic content scenarios where you want more control over scrolling behavior.
Updated on: 2026-03-15T15:28:18+05:30
948 Views
Advertisements