overscroll-behavior/index.html

<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>overscroll-behavior demo</title>
    <link href="style.css" rel="stylesheet" />
    <script src="main.js" defer></script>
  </head>
  <body>
    <header>
      <h1>overscroll-behavior demo</h1>
    </header>
    <main></main>
    <section class="chatbox">
      <header>
        <h2>Active chat</h2>
      </header>
      <div class="messages">
        <p class="me">Chris: Hello!</p>
        <p class="you">Bob: I am well — how are you?</p>
        <p class="me">
          Chris: Fine thanks, just documenting overscroll-behavior
        </p>
        <p class="you">Bob: Oooh, sounds hard!</p>
        <p class="me">
          Chris: Nah, it's OK really. It is a useful property to have for mobile
          apps especially.
        </p>
        <p class="you">Bob: Cool, where can I learn more?</p>
      </div>
      <form>
        <input
          type="text"
          aria-label="Enter your chat message here"
          autofocus />
        <button>Send</button>
      </form>
    </section>
    <footer>
      <p>
        Copyright nobody; inspired by
        <a href="https://ebidel.github.io/demos/chatbox.html"
          >ebidel's chatbox demo</a
        >.
      </p>
    </footer>
  </body>
</html>