<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 15px;
padding: 5px;
border: solid black 1px;
overflow: auto;
}
#container {
width: 90%;
background-color: rgb(197, 255, 236);
height: 300px;
}
#container p {
width: 200%;
}
#yellowDiv {
width: 50%;
float: left;
height: 150px;
background-color: rgb(255, 255, 161);
}
</style>
</head>
<body>
<h1>Turn off overscroll behavior</h1>
<p>Click the "Try it" button to set overscroll-behavior-x property value to 'none' for the yellow box:</p>
<p><strong>Note: </strong>Before you click the button, to test that scrolling behavior in the x-direction is transferred from the yellow box to the green parent box, you might need to use swipe-gesture on a touchpad or a touchscreen.</p>
<button onclick="myFunction()">Try it</button>
<div id="container">
<div id="yellowDiv">