HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS overscroll-behavior 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;
    }
    .sidebar {
      position: fixed;
      top: 0;
      right: 0;
      width: 280px;
      height: 100vh;
      background: #fff;
      border-left: 1px solid #cbd5e1;
      box-shadow: -4px 0 24px rgba(15, 23, 42, 0.12);
      display: flex;
      flex-direction: column;
    }
    .sidebar-header {
      padding: 1rem;
      font-weight: 700;
      border-bottom: 1px solid #e2e8f0;
      background: #f8fafc;
    }
    .sidebar-body {
      flex: 1;
      overflow: auto;
      overscroll-behavior: contain;
      padding: 1rem;
    }
    .sidebar-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 Fixed Sidebar</h1>
    <p>This page is tall so you can scroll the document behind the sidebar. Scroll the sidebar panel to its edges and keep scrolling — the page should stay put thanks to <code>overscroll-behavior: contain</code>.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non nulla ut nunc fermentum dapibus.</p>
    <p>Maecenas et ligula sit amet neque consequat aliquet. Nullam varius eros at eros efficitur.</p>
    <p>Scroll the main page and the sidebar independently to compare behavior at scroll boundaries.</p>
  </div>
  <aside class="sidebar" aria-label="Settings sidebar">
    <div class="sidebar-header">Settings</div>
    <div class="sidebar-body">
      <p><strong>Profile</strong> — Update your display name and avatar.</p>
      <p><strong>Notifications</strong> — Choose email and push alerts.</p>
      <p><strong>Privacy</strong> — Manage visibility and data sharing.</p>
      <p><strong>Security</strong> — Enable two-factor authentication.</p>
      <p><strong>Billing</strong> — View invoices and payment methods.</p>
      <p><strong>Integrations</strong> — Connect third-party apps.</p>
      <p><strong>Advanced</strong> — Export account data or delete account.</p>
      <p><strong>Help</strong> — Browse docs and contact support.</p>
    </div>
  </aside>
</body>
</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
CSS overscroll-behavior Property - Modal Sidebar
