overscroll-behavior property demo

chrisdavidmills · chrisdavidmills · commit d89f09b61757 · 2018-01-23T16:05:13.000Z
diff --git a/overscroll-behavior/index.html b/overscroll-behavior/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <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>
+    <footer>
+      <p>Copyright nobody; have fun.</p>
+    </footer>
+    <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" required autofocus>
+        <button>Send</button>
+      </form>
+    </section>
+  </body>
+</html>
diff --git a/overscroll-behavior/main.js b/overscroll-behavior/main.js
@@ -0,0 +1,33 @@
+// Generate fake contacts
+
+let mainElem = document.querySelector('main');
+
+for(var i = 1; i < 51; i++) {
+  let divElem = document.createElement('div');
+  let pElem = document.createElement('p');
+
+  pElem.textContent = 'Contact ' + i;
+
+  mainElem.appendChild(divElem);
+  divElem.appendChild(pElem);
+}
+
+// Allow submission of chat messages
+
+let form = document.querySelector('form');
+let input = document.querySelector('input');
+let messages = document.querySelector('.messages');
+messages.scrollTop = messages.scrollHeight;
+
+form.addEventListener('submit', e => {
+  e.preventDefault();
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'Chris: ' + input.value;
+
+  messages.appendChild(pElem);
+  messages.scrollTop = messages.scrollHeight;
+
+  input.value = '';
+  input.focus();
+});
diff --git a/overscroll-behavior/style.css b/overscroll-behavior/style.css
@@ -0,0 +1,98 @@
+/* General set up */
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+body {
+  margin: 0;
+}
+
+/* Styling of contacts */
+
+header, footer {
+  background-color: #a60000;
+  color: white;
+  text-align: center;
+  height: 50px;
+  line-height: 50px;
+  text-shadow: 2px 2px 1px black;
+}
+
+h1, h2 {
+  margin: 0;
+}
+
+main div {
+  padding: 10px 20px;
+  border-bottom: 1px solid #eee;
+}
+
+p {
+  margin: 0;
+}
+
+main div p {
+  line-height: 20px;
+}
+
+header {
+  position: sticky;
+  top: 0;
+}
+
+/* Styling of chatbox */
+
+.chatbox {
+  background: white;
+  width: 200px;
+  height: 300px;
+  border: 1px solid black;
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+}
+
+.messages {
+  height: 220px;
+  overflow: auto;
+  /* use overscroll-behavior-y to stop page scrolling behind the chatbox,
+  when the chatbox's scroll limits are reached */
+  overscroll-behavior-y: contain;
+}
+
+.messages p {
+  margin: 10px;
+  padding: 5px;
+  border: 1px solid black;
+}
+
+.me {
+  background-color: #bbb;
+}
+
+.you {
+  background-color: #eee;
+}
+
+.chatbox form {
+  height: 30px;
+  display: flex;
+}
+
+form input, form button {
+  display: block;
+}
+
+form input {
+  width: 70%;
+}
+
+form button {
+  width: 30%;
+  font-size: 0.7rem;
+}
