HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS overscroll-behavior-y Modal Example</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      min-height: 150vh;
      background: #e2e8f0;
    }
    .page-content {
      padding: 2rem;
      max-width: 40rem;
    }
    .page-content p {
      line-height: 1.6;
      color: #334155;
    }
    .modal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 320px;
      background: #fff;
      border: 1px solid #cbd5e1;
      border-radius: 0.75rem;
      box-shadow: 0 12px 40px rgba(15, 23, 42, 0.15);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .modal-header {
      padding: 1rem;
      font-weight: 700;
      border-bottom: 1px solid #e2e8f0;
      background: #f8fafc;
    }
    .modal-body {
      max-height: 220px;
      overflow: auto;
      overscroll-behavior-y: contain;
      padding: 1rem;
    }
    .modal-body p {
      margin: 0 0 0.85rem;
      line-height: 1.55;
      color: #475569;
      font-size: 0.95rem;
    }
  </style>
</head>
<body>
  <div class="page-content">
    <h1>Page with Modal Chat</h1>
    <p>This page is tall so you can scroll the document behind the modal. Scroll the chat body to its top or bottom and keep scrolling — the page should stay put thanks to <code>overscroll-behavior-y: contain</code>.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non nulla ut nunc fermentum dapibus.</p>
    <p>Scroll the main page and the chat body independently to compare vertical behavior at scroll boundaries.</p>
  </div>
  <div class="modal" role="dialog" aria-label="Team chat">
    <div class="modal-header">Team Chat</div>
    <div class="modal-body">
      <p><strong>Alex:</strong> Can we ship the modal fix today?</p>
      <p><strong>Jordan:</strong> Yes — overscroll-behavior-y contain keeps scroll inside the chat body.</p>
      <p><strong>Casey:</strong> Test on mobile too; pull-to-refresh should not steal the gesture.</p>
      <p><strong>Alex:</strong> Scroll this panel to the top or bottom and keep scrolling.</p>
      <p><strong>Jordan:</strong> The page behind should stay put.</p>
      <p><strong>Casey:</strong> Works great for nested scroll areas in overlays.</p>
    </div>
  </div>
</body>
</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
CSS overscroll-behavior-y Property - Modal Chat
