Computer >> Computer tutorials >  >> Programming >> CSS

Disabling Scroll Anchoring with CSS


To disable the default scroll anchoring provided by web browsers, we can use the overflowanchor property.

Example

The following example gives an idea of overflow-anchor property −

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

Output

This will produce the following result −

Disabling Scroll Anchoring with CSS