HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>overscroll-behavior-y chat</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      min-height: 160vh;
      background: #e2e8f0;
      color: #0f172a;
    }

    .page {
      padding: 16px;
      max-width: 36rem;
      line-height: 1.5;
    }

    .chat {
      position: fixed;
      right: 16px;
      bottom: 16px;
      width: 260px;
      background: #fff;
      border: 1px solid #ccc;
      display: flex;
      flex-direction: column;
      max-height: 280px;
    }

    .chat h2 {
      margin: 0;
      padding: 12px;
      border-bottom: 1px solid #e2e8f0;
      font-size: 1rem;
    }

    .messages {
      flex: 1;
      overflow-y: auto;
      overscroll-behavior-y: contain;
      padding: 12px;
    }

    .messages p {
      margin: 0 0 12px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <div class="page">
    <p>This page is tall on purpose. Scroll the chat messages to the top or bottom — <strong>overscroll-behavior-y: contain</strong> keeps the page behind still.</p>
  </div>
  <aside class="chat" aria-label="Chat panel">
    <h2>Chat</h2>
    <div class="messages">
      <p><strong>You</strong> — Hello!</p>
      <p><strong>Sam</strong> — How are you?</p>
      <p><strong>You</strong> — Working on CSS.</p>
      <p><strong>Sam</strong> — Nice — keep going.</p>
      <p><strong>You</strong> — Almost done.</p>
      <p><strong>Sam</strong> — Ship it.</p>
    </div>
  </aside>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS overscroll-behavior-y Property — chat panel