adding an overscroll-behavior-x example

chrisdavidmills · chrisdavidmills · commit 8ae21e451a9b · 2018-01-24T12:53:24.000Z
diff --git a/overscroll-behavior/overscroll-behavior-x.html b/overscroll-behavior/overscroll-behavior-x.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>overscroll-behavior-x demo</title>
+    <style>
+    main {
+      height: 500px;
+      width: 3000px;
+      background-color: magenta;
+      background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
+    }
+
+    main > div {
+      height: 300px;
+      width: 500px;
+      overflow: auto;
+      position: relative;
+      top: 100px;
+      left: 100px;
+      overscroll-behavior-x: contain;
+    }
+
+    div > div {
+      height: 100%;
+      width: 1500px;
+      background-color: yellow;
+      background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
+    }
+
+    p {
+      padding: 10px;
+      background-color: rgba(255,0,0,0.5);
+      margin: 0;
+      width: 300px;
+      position: relative;
+      top: 10px;
+      left: 10px;
+    }
+    </style>
+  </head>
+  <body>
+      <h1>overscroll-behavior-x demo</h1>
+    <main>
+      <div>
+        <div>
+          <p><code>overscroll-behavior-x</code> has been used to make it so that when the scroll boundaries of the inner box are reached, the whole page does not begin to scroll.</p>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
