Consider the below code

<head> <style type="text/css"> .my-block{ display: flex; overflow-x: auto; height: 20em; } .my-block--contain { overscroll-behavior-x: contain; } </style> </head> <body> <div class="my-block"> </div> <div class="my-block my-block--contain"> </div>

When you use a touchpad or two-finger swipe gesture horizontally the overscroll-behavior-x: contain; is supposed to stop the browser from triggering the history navigation but it does not.

It should be noted that if you put overscroll-behavior-x: contain; on the html or body element then it does work.

Matthew Holmes's user avatar

Add wide child content to trigger overflow:

<div class="my-block my-block--contain"> <div style="width: 300%; height: 100%; background: linear-gradient(to right, red, blue, green);"> </div> </div>

This creates a true scroll container where contain prevents history navigation on two-finger swipes.

best rick's user avatar

New contributor

best rick is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.