updating readme, adding viewport meta, addding overscroll-behavior to body element to stop scroll bounce on mobile

chrisdavidmills · chrisdavidmills · commit 6ed53d28e964 · 2018-01-23T16:28:23.000Z
diff --git a/overscroll-behavior/index.html b/overscroll-behavior/index.html
@@ -2,6 +2,7 @@
 <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>
@@ -13,9 +14,6 @@ <h1>overscroll-behavior demo</h1>
     <main>
 
     </main>
-    <footer>
-      <p>Copyright nobody; have fun.</p>
-    </footer>
     <section class="chatbox">
       <header>
         <h2>Active chat</h2>
@@ -33,5 +31,8 @@ <h2>Active chat</h2>
         <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>
diff --git a/overscroll-behavior/style.css b/overscroll-behavior/style.css
@@ -10,6 +10,9 @@ html {
 
 body {
   margin: 0;
+  /* Use overscroll-behavior to stop the "bounce" effect you get on mobile
+  browsers when getting to the top or bottom scroll limits of the page */
+  overscroll-behavior: none;
 }
 
 /* Styling of contacts */
@@ -36,6 +39,10 @@ p {
   margin: 0;
 }
 
+a {
+  color: #ccc;
+}
+
 main div p {
   line-height: 20px;
 }
@@ -67,8 +74,8 @@ header {
 
 .messages p {
   margin: 10px;
-  padding: 5px;
-  border: 1px solid black;
+  padding: 10px;
+  border-radius: 3px;
 }
 
 .me {
@@ -77,6 +84,7 @@ header {
 
 .you {
   background-color: #eee;
+  text-align: right;
 }
 
 .chatbox form {
