overscroll-behavior/index.html

<!DOCTYPE html>
<html>
  <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>