Get your own website Result Size: 625 x 565
x
 
<!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 in the inline-direction</h1>
  <p>Click the "Try it" button to set overscroll-behavior-inline 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 inline-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">