HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <title>CSS overscroll-behavior-block Example</title>

  <style>

    body {

      font-family: sans-serif;

      padding: 2rem;

      min-height: 150vh;

    }

    .scrollable {

      width: 300px;

      height: 150px;

      overflow: auto;

      border: 1px solid #ccc;

      overscroll-behavior-block: contain;

    }

    .scrollable p {

      margin: 0 0 0.75rem;

      line-height: 1.55;

      color: #334155;

    }

    .hint {

      margin-top: 1rem;

      max-width: 22rem;

      font-size: 0.9rem;

      color: #64748b;

    }

  </style>

</head>

<body>

  <h1>Scrollable Container with Contained Overscroll</h1>

  <p class="hint">Scroll inside the box on the block axis (vertically), then keep scrolling. The page behind should not scroll because of <code>overscroll-behavior-block: contain</code>.</p>

  <div class="scrollable">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero.</p>

    <p>Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>

  </div>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS overscroll-behavior-block Property - contain