From 293a16a4a37b7c5495594728772f7d7839b8690a Mon Sep 17 00:00:00 2001
From: Riccardo Caroli <rcaroli@webgriffe.com>
Date: Tue, 23 Jun 2020 14:25:39 +0200
Subject: [PATCH] docs: scroll block demo + revision scroll demos + scroll
 super initevents

---
 src/extensions/scroll/scroll.js               |   1 +
 .../code/iframe/components/scroll/block.js    | 160 +++++++++++++++++
 .../code/iframe/components/scroll/delay.js    |   2 +-
 .../iframe/components/scroll/direction.js     |   2 +-
 .../code/iframe/components/scroll/distance.js | 167 +++++++++---------
 .../iframe/components/scroll/mode-block.js    | 150 ----------------
 .../iframe/components/scroll/mode-infinite.js | 167 +++++++++---------
 .../iframe/components/scroll/mode-inside.js   | 167 +++++++++---------
 .../iframe/components/scroll/mode-once.js     | 167 +++++++++---------
 .../components/scroll/mode-outside-once.js    | 167 +++++++++---------
 .../iframe/components/scroll/mode-outside.js  | 167 +++++++++---------
 .../components/scroll/mode-responsive.js      | 167 +++++++++---------
 src/gatsby/markdown/components/scroll/api.md  |  21 ++-
 .../markdown/components/scroll/option-js.md   |   2 -
 .../markdown/components/scroll/other.md       |  11 ++
 src/gatsby/markdown/components/sticky/api.md  |  17 +-
 src/private/demos/components/scroll/block.js  |  39 ++++
 .../scroll/{mode-block.less => block.less}    |   0
 src/xtend-demos.js                            |   1 +
 src/xtend-demos.less                          |   2 +-
 20 files changed, 832 insertions(+), 745 deletions(-)
 create mode 100644 src/gatsby/code/iframe/components/scroll/block.js
 delete mode 100644 src/gatsby/code/iframe/components/scroll/mode-block.js
 create mode 100644 src/private/demos/components/scroll/block.js
 rename src/private/demos/components/scroll/{mode-block.less => block.less} (100%)

diff --git a/src/extensions/scroll/scroll.js b/src/extensions/scroll/scroll.js
index e23460340d9..d12c75b3d3b 100644
--- a/src/extensions/scroll/scroll.js
+++ b/src/extensions/scroll/scroll.js
@@ -97,6 +97,7 @@ class Scroll extends Xt.Toggle {
    * init events
    */
   initEvents() {
+    super.initEvents()
     const self = this
     const options = self.options
     // event on
diff --git a/src/gatsby/code/iframe/components/scroll/block.js b/src/gatsby/code/iframe/components/scroll/block.js
new file mode 100644
index 00000000000..351573ba56c
--- /dev/null
+++ b/src/gatsby/code/iframe/components/scroll/block.js
@@ -0,0 +1,160 @@
+import React from 'react'
+import path from 'path'
+
+import DemoVanillaIframe from 'components/demo/demo-vanilla-iframe'
+
+const filename = __filename.replace(/\\/g, '/')
+const dirs = path.dirname(filename).split('/')
+export const demo = {
+  container: true,
+  full: false,
+  name: path.basename(filename, '.js'),
+  component: dirs.pop(),
+  type: dirs.pop(),
+}
+
+demo.htmlSource = `
+<div class="list list-default list-space-medium demo--scroll-container-block">
+
+  <div class="indicator">
+    <button type="button" class="btn btn-primary demo--scroll-container-block--btn">
+      Click to fade out and block
+    </button>
+  </div>
+
+  <div class="card card-primary fade scroll-block">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card card-primary fade scroll-block">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <button type="button" class="btn btn-primary demo--scroll-container-block--btn">
+      Click to fade out and block
+    </button>
+  </div>
+
+</div>
+`
+
+class Page extends React.Component {
+  render() {
+    return <DemoVanillaIframe demo={demo} />
+  }
+}
+
+export default Page
diff --git a/src/gatsby/code/iframe/components/scroll/delay.js b/src/gatsby/code/iframe/components/scroll/delay.js
index ce36e90985c..6f126d0bff5 100644
--- a/src/gatsby/code/iframe/components/scroll/delay.js
+++ b/src/gatsby/code/iframe/components/scroll/delay.js
@@ -14,7 +14,7 @@ export const demo = {
 }
 
 demo.htmlSource = `
-<div class="row row-default scroll-container demo--scroll-container--delay">
+<div class="row row-default demo--scroll-container--delay">
 
   <div class="col-12 col-6-sm">
     <div class="card card-primary">
diff --git a/src/gatsby/code/iframe/components/scroll/direction.js b/src/gatsby/code/iframe/components/scroll/direction.js
index e786dc42f21..e9c5db1f1fc 100644
--- a/src/gatsby/code/iframe/components/scroll/direction.js
+++ b/src/gatsby/code/iframe/components/scroll/direction.js
@@ -14,7 +14,7 @@ export const demo = {
 }
 
 demo.htmlSource = `
-<div class="row row-default scroll-container demo--scroll-container--direction">
+<div class="row row-default demo--scroll-container--direction">
 
   <div class="col-12 col-6-sm">
     <div class="card card-primary">
diff --git a/src/gatsby/code/iframe/components/scroll/distance.js b/src/gatsby/code/iframe/components/scroll/distance.js
index 31079a4c353..5bdcbc02c89 100644
--- a/src/gatsby/code/iframe/components/scroll/distance.js
+++ b/src/gatsby/code/iframe/components/scroll/distance.js
@@ -14,130 +14,129 @@ export const demo = {
 }
 
 demo.htmlSource = `
-<div data-xt-scroll="{ elements: '.scroll-container > *', distance: 0 }">
-  <div class="list list-default list-space-medium scroll-container demo--scroll-container--distance">
-
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+<div class="list list-default list-space-medium demo--scroll-container--distance"
+  data-xt-scroll="{ elements: ':scope > *', distance: 0 }">
+
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
-
   </div>
+
 </div>
 `
 
diff --git a/src/gatsby/code/iframe/components/scroll/mode-block.js b/src/gatsby/code/iframe/components/scroll/mode-block.js
deleted file mode 100644
index f3f6f02f308..00000000000
--- a/src/gatsby/code/iframe/components/scroll/mode-block.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import React from 'react'
-import path from 'path'
-
-import DemoVanillaIframe from 'components/demo/demo-vanilla-iframe'
-
-const filename = __filename.replace(/\\/g, '/')
-const dirs = path.dirname(filename).split('/')
-export const demo = {
-  container: true,
-  full: false,
-  name: path.basename(filename, '.js'),
-  component: dirs.pop(),
-  type: dirs.pop(),
-}
-
-demo.htmlSource = `
-<div data-xt-scroll="{ elements: '.scroll-container > *' }">
-  <div class="list list-default list-space-medium scroll-container demo--scroll-container-block">
-
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-  </div>
-</div>
-`
-
-class Page extends React.Component {
-  render() {
-    return <DemoVanillaIframe demo={demo} />
-  }
-}
-
-export default Page
diff --git a/src/gatsby/code/iframe/components/scroll/mode-infinite.js b/src/gatsby/code/iframe/components/scroll/mode-infinite.js
index 54f7deed02c..9af7cc0f3c7 100644
--- a/src/gatsby/code/iframe/components/scroll/mode-infinite.js
+++ b/src/gatsby/code/iframe/components/scroll/mode-infinite.js
@@ -14,130 +14,129 @@ export const demo = {
 }
 
 demo.htmlSource = `
-<div data-xt-scroll="{ elements: '.scroll-container > *' }">
-  <div class="list list-default list-space-medium scroll-container demo--scroll-container-infinite">
-
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+<div class="list list-default list-space-medium demo--scroll-container-infinite"
+  data-xt-scroll="{ elements: ':scope > *' }">
+
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
-
   </div>
+
 </div>
 `
 
diff --git a/src/gatsby/code/iframe/components/scroll/mode-inside.js b/src/gatsby/code/iframe/components/scroll/mode-inside.js
index 287c86576e3..46690dfe16a 100644
--- a/src/gatsby/code/iframe/components/scroll/mode-inside.js
+++ b/src/gatsby/code/iframe/components/scroll/mode-inside.js
@@ -14,130 +14,129 @@ export const demo = {
 }
 
 demo.htmlSource = `
-<div data-xt-scroll="{ elements: '.scroll-container > *' }">
-  <div class="list list-default list-space-medium scroll-container demo--scroll-container--inside">
-
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+<div class="list list-default list-space-medium demo--scroll-container--inside"
+  data-xt-scroll="{ elements: ':scope > *' }">
+
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
-
   </div>
+
 </div>
 `
 
diff --git a/src/gatsby/code/iframe/components/scroll/mode-once.js b/src/gatsby/code/iframe/components/scroll/mode-once.js
index 016fa37e5ce..f781835445c 100644
--- a/src/gatsby/code/iframe/components/scroll/mode-once.js
+++ b/src/gatsby/code/iframe/components/scroll/mode-once.js
@@ -14,130 +14,129 @@ export const demo = {
 }
 
 demo.htmlSource = `
-<div data-xt-scroll="{ elements: '.scroll-container > *' }">
-  <div class="list list-default list-space-medium scroll-container demo--scroll-container--once">
-
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+<div class="list list-default list-space-medium demo--scroll-container--once"
+  data-xt-scroll="{ elements: ':scope > *' }">
+
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
-
   </div>
+
 </div>
 `
 
diff --git a/src/gatsby/code/iframe/components/scroll/mode-outside-once.js b/src/gatsby/code/iframe/components/scroll/mode-outside-once.js
index e56c6031b31..a27aa2ab3a6 100644
--- a/src/gatsby/code/iframe/components/scroll/mode-outside-once.js
+++ b/src/gatsby/code/iframe/components/scroll/mode-outside-once.js
@@ -14,130 +14,129 @@ export const demo = {
 }
 
 demo.htmlSource = `
-<div data-xt-scroll="{ elements: '.scroll-container > *' }">
-  <div class="list list-default list-space-medium scroll-container demo--scroll-container--outside-once">
-
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+<div class="list list-default list-space-medium demo--scroll-container--outside-once"
+  data-xt-scroll="{ elements: ':scope > *' }">
+
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
-
   </div>
+
 </div>
 `
 
diff --git a/src/gatsby/code/iframe/components/scroll/mode-outside.js b/src/gatsby/code/iframe/components/scroll/mode-outside.js
index f9f0c15e4ab..d69244f894d 100644
--- a/src/gatsby/code/iframe/components/scroll/mode-outside.js
+++ b/src/gatsby/code/iframe/components/scroll/mode-outside.js
@@ -14,130 +14,129 @@ export const demo = {
 }
 
 demo.htmlSource = `
-<div data-xt-scroll="{ elements: '.scroll-container > *' }">
-  <div class="list list-default list-space-medium scroll-container demo--scroll-container--outside">
-
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+<div class="list list-default list-space-medium demo--scroll-container--outside"
+  data-xt-scroll="{ elements: ':scope > *' }">
+
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
-
   </div>
+
 </div>
 `
 
diff --git a/src/gatsby/code/iframe/components/scroll/mode-responsive.js b/src/gatsby/code/iframe/components/scroll/mode-responsive.js
index 48d1854c4a2..1fed298f107 100644
--- a/src/gatsby/code/iframe/components/scroll/mode-responsive.js
+++ b/src/gatsby/code/iframe/components/scroll/mode-responsive.js
@@ -14,130 +14,129 @@ export const demo = {
 }
 
 demo.htmlSource = `
-<div data-xt-scroll="{ elements: '.scroll-container > *' }">
-  <div class="list list-default list-space-medium scroll-container demo--scroll-container--responsive">
-
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+<div class="list list-default list-space-medium demo--scroll-container--responsive"
+  data-xt-scroll="{ elements: ':scope > *' }">
+
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="card card-primary">
-      <div class="card-design"></div>
-      <div class="card-inner">
-        <div class="card-content">
-          <div class="card-block card-item">
-            <div class="card-title">Lorem ipsum dolor sit amet</div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
-          </div>
+  <div class="card card-primary">
+    <div class="card-design"></div>
+    <div class="card-inner">
+      <div class="card-content">
+        <div class="card-block card-item">
+          <div class="card-title">Lorem ipsum dolor sit amet</div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie diam nec euismod commodo. Nunc ut fringilla nibh. Duis quis arcu quis neque tempor lobortis nec nec mauris. Proin vel elit pretium metus egestas congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque hendrerit sagittis quam eget elementum. Vestibulum eu nulla nisl. Duis nec commodo tortor. Aenean feugiat, libero eget ultricies viverra, justo nunc efficitur lorem, at aliquet ante eros in est.</p>
         </div>
       </div>
     </div>
-
   </div>
+
 </div>
 `
 
diff --git a/src/gatsby/markdown/components/scroll/api.md b/src/gatsby/markdown/components/scroll/api.md
index 9ba09d22927..6b5d1d09e61 100644
--- a/src/gatsby/markdown/components/scroll/api.md
+++ b/src/gatsby/markdown/components/scroll/api.md
@@ -51,6 +51,21 @@ self.targets.filter(x => self.hasCurrent(x))
 
 ## Trigger
 
+Trigger events this way:
+
+```js
+document.querySelector('#my-element-or-target').dispatchEvent(new CustomEvent('on.trigger.xt'))
+```
+
+<div class="table-scroll">
+
+|                         | Syntax                                    | DOM Element                    | Description                   |
+| ----------------------- | ----------------------------------------- | ----------------------------- | ----------------------------- |
+| Event                   | `on.trigger.xt`       | `elements` `targets` | Activation event             |
+| Event                   | `off.trigger.xt`      | `elements` `targets` | Deactivation event            |
+
+</div>
+
 [[noteDefault]]
 | For triggering and listening the **resize event**, refer to [structure](/components/structure/other#resize).
 
@@ -63,7 +78,7 @@ const eventChange = e => {
   // logic
 }
 
-document.querySelector('#my-element').addEventListener('change.xt', eventChange)
+document.querySelector('#my-element-or-target').addEventListener('change.xt', eventChange)
 ```
 
 Listen to events delegation with **useCapture** this way:
@@ -90,6 +105,10 @@ object.addEventListener('change.xt', eventChange, true)
 
 |                         | Syntax                                    | DOM Element                    | Description                   |
 | ----------------------- | ----------------------------------------- | ----------------------------- | ----------------------------- |
+| Event                   | `on.xt`       | `elements` `targets` | Activation event             |
+| Event                   | `off.xt`      | `elements` `targets` | Deactivation event            |
+| Event                   | `ondone.xt`           | `elements` `targets` | Activation event after delay and duration             |
+| Event                   | `offdone.xt`           | `elements` `targets` | Deactivation event after delay and duration             |
 | Event                   | `change.xt`       | `elements` | Computation event             |
 | Event                   | `medialoaded.xt`           | `elements` `targets` | Images loaded event            |
 | Event                   | `init.xt`           | `object` | Init event             |
diff --git a/src/gatsby/markdown/components/scroll/option-js.md b/src/gatsby/markdown/components/scroll/option-js.md
index eda596e1645..61413dfa070 100644
--- a/src/gatsby/markdown/components/scroll/option-js.md
+++ b/src/gatsby/markdown/components/scroll/option-js.md
@@ -26,8 +26,6 @@ You can set scroll mode with css selectors.
   </div>
   <div class="gatsby_demo_item" data-iframe="iframe/components/scroll/mode-responsive">
   </div>
-  <div class="gatsby_demo_item" data-iframe="iframe/components/scroll/mode-block">
-  </div>
 </demo>
 
 ## Distance
diff --git a/src/gatsby/markdown/components/scroll/other.md b/src/gatsby/markdown/components/scroll/other.md
index 4be018b87fc..3ca57685bde 100644
--- a/src/gatsby/markdown/components/scroll/other.md
+++ b/src/gatsby/markdown/components/scroll/other.md
@@ -15,6 +15,17 @@ Animate with inverse `.inverse` or `self.direction`.
   </div>
 </demo>
 
+## Block
+
+You can block the scroll animations with the class `.scroll-block`. Add also the class `.fade` to have them enabled.
+
+If you want to block them with fade in or out use the events `on.trigger.xt` or `off.trigger.xt`. 
+
+<demo>
+  <div class="gatsby_demo_item" data-iframe="iframe/components/scroll/block">
+  </div>
+</demo>
+
 ## @TODO
 
 Use events `'change.xt.scroll'` inside you can use the values of `self.detail.ratio` `self.detail.ratioInverse` `self.detail.ratioDouble`.
diff --git a/src/gatsby/markdown/components/sticky/api.md b/src/gatsby/markdown/components/sticky/api.md
index 4a7995bfc83..a218173e042 100644
--- a/src/gatsby/markdown/components/sticky/api.md
+++ b/src/gatsby/markdown/components/sticky/api.md
@@ -51,6 +51,21 @@ self.targets.filter(x => self.hasCurrent(x))
 
 ## Trigger
 
+Trigger events this way:
+
+```js
+document.querySelector('#my-element-or-target').dispatchEvent(new CustomEvent('on.trigger.xt'))
+```
+
+<div class="table-scroll">
+
+|                         | Syntax                                    | DOM Element                    | Description                   |
+| ----------------------- | ----------------------------------------- | ----------------------------- | ----------------------------- |
+| Event                   | `on.trigger.xt`       | `elements` `targets` | Activation event             |
+| Event                   | `off.trigger.xt`      | `elements` `targets` | Deactivation event            |
+
+</div>
+
 [[noteDefault]]
 | For triggering and listening the **resize event**, refer to [structure](/components/structure/other#resize).
 
@@ -63,7 +78,7 @@ const eventChange = e => {
   // logic
 }
 
-document.querySelector('#my-element').addEventListener('change.xt', eventChange)
+document.querySelector('#my-element-or-target').addEventListener('change.xt', eventChange)
 ```
 
 Listen to events delegation with **useCapture** this way:
diff --git a/src/private/demos/components/scroll/block.js b/src/private/demos/components/scroll/block.js
new file mode 100644
index 00000000000..15b0a1fa6cb
--- /dev/null
+++ b/src/private/demos/components/scroll/block.js
@@ -0,0 +1,39 @@
+import { Xt } from 'xtend-library/src/xt.js'
+
+Xt.mount.push({
+  matches: '.demo--scroll-container-block',
+  mount: object => {
+    // vars
+
+    const btns = object.querySelectorAll('#demo--scroll-container-block--btn')
+
+    // init
+
+    let self = new Xt.Scroll(object, {
+      elements: ':scope > *',
+    })
+
+    // eventBlock
+
+    const eventBlock = () => {
+      for (const element of self.elements) {
+        // fade out
+        element.dispatchEvent(new CustomEvent('off.trigger.xt'))
+        // block
+        element.classList.add('scroll-block')
+      }
+    }
+
+    for (const btn of btns) {
+      btn.addEventListener('click', eventBlock)
+    }
+
+    // unmount
+
+    const unmount = () => {
+      self.destroy()
+      self = null
+    }
+    return unmount
+  },
+})
diff --git a/src/private/demos/components/scroll/mode-block.less b/src/private/demos/components/scroll/block.less
similarity index 100%
rename from src/private/demos/components/scroll/mode-block.less
rename to src/private/demos/components/scroll/block.less
diff --git a/src/xtend-demos.js b/src/xtend-demos.js
index 5ed80532737..f1379ff8ab1 100644
--- a/src/xtend-demos.js
+++ b/src/xtend-demos.js
@@ -15,6 +15,7 @@ if (typeof window !== 'undefined') {
   require('xtend-library/src/private/demos/components/loader/js-spinner.js')
   require('xtend-library/src/private/demos/components/overlay/events-methods.js')
   require('xtend-library/src/private/demos/components/overlay/nested.js')
+  require('xtend-library/src/private/demos/components/scroll/block.js')
   require('xtend-library/src/private/demos/components/scroll/delay.js')
   require('xtend-library/src/private/demos/components/scroll/direction.js')
   require('xtend-library/src/private/demos/components/scroll/mode-block.js')
diff --git a/src/xtend-demos.less b/src/xtend-demos.less
index 82036c20b3c..9d042fd2606 100644
--- a/src/xtend-demos.less
+++ b/src/xtend-demos.less
@@ -28,10 +28,10 @@
 @import 'xtend-library/src/private/demos/components/overlay/class-html.less';
 @import 'xtend-library/src/private/demos/components/overlay/content-multiple.less';
 @import 'xtend-library/src/private/demos/components/overlay/disable.less';
+@import 'xtend-library/src/private/demos/components/scroll/block.less';
 @import 'xtend-library/src/private/demos/components/scroll/delay.less';
 @import 'xtend-library/src/private/demos/components/scroll/direction.less';
 @import 'xtend-library/src/private/demos/components/scroll/distance.less';
-@import 'xtend-library/src/private/demos/components/scroll/mode-block.less';
 @import 'xtend-library/src/private/demos/components/scroll/mode-infinite.less';
 @import 'xtend-library/src/private/demos/components/scroll/mode-inside.less';
 @import 'xtend-library/src/private/demos/components/scroll/mode-once.less';