Disabling Scroll Anchoring with CSS

CSSWeb DevelopmentFront End Technology

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 −

 Live Demo

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

raja
Published on 12-Mar-2021 11:03:19
Advertisements