Merge pull request #1024 from Patternslib/fix-scroll-box-elastic-scrolling

thet · web-flow · commit 6e3b6dd3e9d9 · 2022-06-27T17:53:25.000+02:00
Fix scroll box elastic scrolling
diff --git a/src/pat/scroll-box/documentation.md b/src/pat/scroll-box/documentation.md
@@ -8,7 +8,9 @@ Ho(horizontal scrolling is not yet supported.
 
 The classes are:
 
--   `scroll-up`: when scrolling upwards,
--   `scroll-down`: when scrolling downwards,
+-   `scroll-up`: when scrolling upwards - the class is kept even after scrolling has stopped,
+-   `scroll-down`: when scrolling downwards - the class is kept even after scrolling has stopped,
+-   `scrolling-up`: when scrolling upwards - this class is removed after scrolling has stopped,
+-   `scrolling-down`: when scrolling downwards - this class is removed after scrolling has stopped,
 -   `scroll-position-top`: when the scrolling container is scrolled to the top,
 -   `scroll-position-bottom`: when the scrolling container is scrolled to the bottom.
diff --git a/src/pat/scroll-box/index.html b/src/pat/scroll-box/index.html
@@ -15,6 +15,15 @@
                 height: 200vh;
             }
 
+            .container {
+                /**
+                 * trick to espatblish a relative containing block
+                 * for position:fixed
+                 * See: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed
+                 */
+                transform: rotate(0);
+            }
+
             body .pat-scroll-box {
                 overflow-y: auto;
                 border: 1px solid black;
@@ -49,8 +58,10 @@
         </style>
     </head>
     <body class="pat-scroll-box">
+      <div class="container">
         <div class="pat-scroll-box">
-            <div class="pat-scroll-box--inner">hello.</div>
+          <div class="pat-scroll-box--inner">hello.</div>
         </div>
+      </div>
     </body>
 </html>
diff --git a/src/pat/scroll-box/scroll-box.js b/src/pat/scroll-box/scroll-box.js
@@ -62,15 +62,14 @@ export default Base.extend({
         const to_add = [];
 
         if (scroll_pos < this.last_known_scroll_position) {
-            to_add.push("scroll-up");
             to_add.push("scroll-up");
             to_add.push("scrolling-up");
         } else if (this.last_known_scroll_position < scroll_pos) {
             to_add.push("scroll-down");
             to_add.push("scrolling-down");
         }
 
-        if (scroll_pos === 0) {
+        if (scroll_pos <= 0) {
             to_add.push("scroll-position-top");
         } else if (
             this.scroll_listener === window &&
@@ -101,6 +100,8 @@ export default Base.extend({
     },
 
     clear_scrolling_classes() {
+        // Remove ``scrolling-up`` and ``scrolling-down``
+        // but keep ``scroll-up`` and ``scroll-down``.
         this.el.classList.remove("scrolling-up", "scrolling-down");
     },
 
diff --git a/src/pat/scroll-box/scroll-box.test.js b/src/pat/scroll-box/scroll-box.test.js
@@ -69,6 +69,16 @@ describe("pat-scroll-box", function () {
         expect(el.classList).not.toContain("scrolling-up");
         expect(el.classList).toContain("scrolling-down");
 
+        el.scrollTop = 250; // overscrolling / elastic scrolling in Safari
+        el.dispatchEvent(events.scroll_event());
+        await utils.animation_frame();
+        expect(el.classList).not.toContain("scroll-position-top");
+        expect(el.classList).toContain("scroll-position-bottom");
+        expect(el.classList).not.toContain("scroll-up");
+        expect(el.classList).toContain("scroll-down");
+        expect(el.classList).not.toContain("scrolling-up");
+        expect(el.classList).toContain("scrolling-down");
+
         el.scrollTop = 0;
         el.dispatchEvent(events.scroll_event());
         await utils.animation_frame();
@@ -79,7 +89,19 @@ describe("pat-scroll-box", function () {
         expect(el.classList).toContain("scrolling-up");
         expect(el.classList).not.toContain("scrolling-down");
 
+        el.scrollTop = -50; // overscrolling / elastic scrolling in Safari
+        el.dispatchEvent(events.scroll_event());
+        await utils.animation_frame();
+        expect(el.classList).toContain("scroll-position-top");
+        expect(el.classList).not.toContain("scroll-position-bottom");
+        expect(el.classList).toContain("scroll-up");
+        expect(el.classList).not.toContain("scroll-down");
+        expect(el.classList).toContain("scrolling-up");
+        expect(el.classList).not.toContain("scrolling-down");
+
         // Test for clearing the scrolling classes after a scroll stop
+        // scroll-up and scroll-down are not cleared.
+
         // Still there...
         await utils.timeout(custom_timeout / 2);
         expect(el.classList).toContain("scrolling-up");
