HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS overscroll-behavior-x Example</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 2rem;
      min-width: 150vw;
    }
    .scrollable-container {
      width: 300px;
      height: 200px;
      overflow-x: auto;
      border: 1px solid #ccc;
      overscroll-behavior-x: contain;
    }
    .scrollable-container .inner {
      width: 600px;
      padding: 1rem;
      line-height: 1.55;
      color: #334155;
    }
    .hint {
      margin-top: 1rem;
      max-width: 22rem;
      font-size: 0.9rem;
      color: #64748b;
    }
  </style>
</head>
<body>
  <h1>Horizontal Scroll with Controlled Overscroll Behavior</h1>
  <p class="hint">Scroll inside the box left or right, then keep scrolling. The page behind should not scroll because of <code>overscroll-behavior-x: contain</code>.</p>
  <div class="scrollable-container">
    <div class="inner">
      This is a scrollable container with horizontal overflow. The overscroll behavior has been set to "contain," so when you reach the end of the scrollable content, the scrolling does not propagate to the parent container.
    </div>
  </div>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS overscroll-behavior-x Property - contain