Addition of example for overscroll-behavior-block property (#2521)

* Addtn of example for overscroll-behavior-block pty * edit only what is needed, possibly * put contain back in * Update live-examples/css-examples/basic-box-model/meta.json * trying to make linter happy * overwrote all the carriage returns. * removed all the white space and put it back in. * fix linting issues * chore(css): make formatter happy --------- Co-authored-by: Estelle Weyl <[email protected]> Co-authored-by: Brian Thomas Smith <[email protected]>
mdn · Dec 26, 2023 · 4c966b0 · 4c966b0
1 parent 564b213
commit 4c966b0
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 0 deletions.
diff --git a/live-examples/css-examples/basic-box-model/meta.json b/live-examples/css-examples/basic-box-model/meta.json
@@ -183,6 +183,13 @@
       "title": "CSS Demo: overscroll-behavior",
       "type": "css"
     },
+    "overscrollBehaviorBlock": {
+      "cssExampleSrc": "./live-examples/css-examples/basic-box-model/overscroll-behavior-block.css",
+      "exampleCode": "./live-examples/css-examples/basic-box-model/overscroll-behavior-block.html",
+      "fileName": "overscroll-behavior-block.html",
+      "title": "CSS Demo: overscroll-behavior-block",
+      "type": "css"
+    },
     "overscrollBehaviorX": {
       "cssExampleSrc": "./live-examples/css-examples/basic-box-model/overscroll-behavior-x.css",
       "exampleCode": "./live-examples/css-examples/basic-box-model/overscroll-behavior-x.html",

diff --git a/live-examples/css-examples/basic-box-model/overscroll-behavior-block.css b/live-examples/css-examples/basic-box-model/overscroll-behavior-block.css
@@ -0,0 +1,41 @@
+.example-container {
+  display: flex;
+  flex-direction: column;
+  width: 35em;
+  height: 18em;
+  border: medium dotted;
+  padding: 0.75em;
+  text-align: left;
+  overflow: scroll;
+}
+
+.box {
+  white-space: nowrap;
+  margin-bottom: 1em;
+}
+
+#example-element {
+  display: flex;
+  flex-direction: row;
+  width: 20em;
+  min-height: 12em;
+  border: medium dotted #1b76c4;
+  padding: 0.3em;
+  margin: 0 0.3em;
+  text-align: left;
+  overflow-x: scroll;
+  overscroll-behavior-x: contain;
+}
+
+#element-left {
+  overflow-wrap: break-word;
+  min-width: 120%;
+  margin-right: 2em;
+}
+
+#last-element {
+  margin-top: 1em;
+  white-space: normal;
+  overflow-wrap: break-word;
+  line-height: 2em;
+}
diff --git a/live-examples/css-examples/basic-box-model/overscroll-behavior-block.html b/live-examples/css-examples/basic-box-model/overscroll-behavior-block.html
@@ -0,0 +1,62 @@
+<section id="example-choice-list" class="example-choice-list large" data-property="overscroll-behavior-block">
+  <div class="example-choice">
+    <pre><code class="language-css">overscroll-behavior-block: auto;</code></pre>
+    <button type="button" class="copy hidden" aria-hidden="true">
+      <span class="visually-hidden">Copy to Clipboard</span>
+    </button>
+  </div>
+
+  <div class="example-choice">
+    <pre><code class="language-css">overscroll-behavior-block: contain;</code></pre>
+    <button type="button" class="copy hidden" aria-hidden="true">
+      <span class="visually-hidden">Copy to Clipboard</span>
+    </button>
+  </div>
+
+  <div class="example-choice">
+    <pre><code class="language-css">overscroll-behavior-block: none;</code></pre>
+    <button type="button" class="copy hidden" aria-hidden="true">
+      <span class="visually-hidden">Copy to Clipboard</span>
+    </button>
+  </div>
+</section>
+
+<div id="output" class="output large hidden">
+  <section id="default-example" class="default-example">
+    <div class="example-container">
+      <div class="box">
+        This is a scrollable container. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn
+        Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the
+        face of the earth.
+        <br /><br />
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit eligendi, voluptatem unde nesciunt dolor ipsum
+        aut mollitia quaerat pariatur sunt ut obcaecati corrupti facilis quam quibusdam facere provident quas eius.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, quisquam quis laborum maiores labore
+        blanditiis. Assumenda vitae voluptate at, repudiandae ea quas aliquid! Architecto totam ab reiciendis recusandae
+        deserunt minus?
+      </div>
+      <div id="example-element">
+        <div id="element-left">
+          This is the inner container. Focus on this container, scroll to the bottom and when you reach the bottom edge
+          keep scrolling.
+          <p>
+            If you have <code class="language-css">overscroll-behavior-block: auto;</code> selected the outer container
+            will start to scroll.
+          </p>
+          If you have <code class="language-css">overscroll-behavior-block: contain;</code> selected, the outer
+          container will not scroll unless you move your cursor out of the inner container and try to perform scroll on
+          the outer container. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non consequatur corrupti veniam
+          culpa omnis ad, quibusdam quam natus et! Eligendi, aspernatur earum. Aliquam soluta repudiandae quam nobis
+          praesentium impedit delectus!
+        </div>
+      </div>
+      <div id="last-element">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores voluptate sunt autem ea corporis minima
+        eligendi iste, soluta ab fuga ullam molestias maxime necessitatibus doloremque ex quos. Atque, eius rem. Lorem
+        ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laborum aperiam consequuntur dicta accusamus
+        officiis, officia soluta amet aliquam eum, magni quasi fugit laboriosam recusandae nesciunt porro sint. Eos,
+        officia.
+      </div>
+    </div>
+  </section>
+</div>