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 −