feat(pat scroll-box): Allow detection of scroll-stop.

Add ``scrolling-up`` and ``scrolling-down`` classes which will be removed after the user has stopped scrolling.
This allows for detection of a scrolling situation vs non-scrolling situation.

Author: thet

src/pat/scroll-box/scroll-box.js

@@ -1,6 +1,10 @@
 import Base from "../../core/base";
+import Parser from "../../core/parser";
 import events from "../../core/events";
 
+export const parser = new Parser("scroll-box");
+parser.addArgument("timeout-stop", 600); // Timeout to detect when stopping scrolling.
+
 export default Base.extend({
     name: "scroll-box",
     trigger: ".pat-scroll-box",
@@ -11,6 +15,7 @@ export default Base.extend({
 
     init() {
         const el = this.el;
+        this.options = parser.parse(el);
         this.scroll_listener = el === document.body ? window : el;
 
         // If scolling is not possible, exit.
@@ -31,6 +36,14 @@ export default Base.extend({
                 if (!ticking) {
                     window.requestAnimationFrame(() => {
                         this.set_scroll_classes();
+
+                        // Detect case when user stops scrolling.
+                        window.clearTimeout(this.timeout_id__scroll_stop);
+                        this.timeout_id__scroll_stop = window.setTimeout(() => {
+                            // When user stopped scrolling, set/clear scroll classes.
+                            this.clear_scrolling_classes();
+                        }, this.options.timeoutStop);
+
                         ticking = false;
                     });
                     ticking = true;
@@ -47,13 +60,17 @@ export default Base.extend({
         const el = this.el;
         el.classList.remove("scroll-up");
         el.classList.remove("scroll-down");
+        el.classList.remove("scrolling-up");
+        el.classList.remove("scrolling-down");
         el.classList.remove("scroll-position-top");
         el.classList.remove("scroll-position-bottom");
 
         if (scroll_pos < this.last_known_scroll_position) {
             el.classList.add("scroll-up");
+            el.classList.add("scrolling-up");
         } else if (this.last_known_scroll_position < scroll_pos) {
             el.classList.add("scroll-down");
+            el.classList.add("scrolling-down");
         }
 
         if (scroll_pos === 0) {
@@ -72,6 +89,10 @@ export default Base.extend({
         this.last_known_scroll_position = scroll_pos;
     },
 
+    clear_scrolling_classes() {
+        this.el.classList.remove("scrolling-up", "scrolling-down");
+    },
+
     get_scroll_y() {
         if (this.scroll_listener === window) {
             // scrolling the window

src/pat/scroll-box/scroll-box.test.js

@@ -1,14 +1,22 @@
-import pattern from "./scroll-box";
+import pattern, { parser } from "./scroll-box";
 import utils from "../../core/utils";
 import events from "../../core/events";
 
 describe("pat-scroll-box", function () {
+    let orig_timeout;
+    let custom_timeout = 10; // reduced timeout for faster testing
+    beforeEach(function () {
+        orig_timeout = parser.parameters["timeout-stop"].value;
+        parser.parameters["timeout-stop"].value = custom_timeout;
+    });
+
     afterEach(function () {
         jest.restoreAllMocks();
         document.body.innerHTML = "";
+        parser.parameters["timeout-stop"].value = orig_timeout;
     });
 
-    it("1 - Basic functionality", async function () {
+    it("Basic functionality", async function () {
         document.body.innerHTML = `
           <div id="el1" style="overflow: scroll"></div>
         `;
@@ -28,6 +36,8 @@ describe("pat-scroll-box", function () {
         expect(el.classList).not.toContain("scroll-position-bottom");
         expect(el.classList).not.toContain("scroll-up");
         expect(el.classList).not.toContain("scroll-down");
+        expect(el.classList).not.toContain("scrolling-up");
+        expect(el.classList).not.toContain("scrolling-down");
 
         el.scrollTop = 100;
         el.dispatchEvent(events.scroll_event());
@@ -36,6 +46,8 @@ describe("pat-scroll-box", function () {
         expect(el.classList).not.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 = 50;
         el.dispatchEvent(events.scroll_event());
@@ -44,6 +56,8 @@ describe("pat-scroll-box", function () {
         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");
 
         el.scrollTop = 200;
         el.dispatchEvent(events.scroll_event());
@@ -52,6 +66,8 @@ describe("pat-scroll-box", function () {
         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());
@@ -60,5 +76,33 @@ describe("pat-scroll-box", function () {
         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
+        // Still there...
+        await utils.timeout(custom_timeout / 2);
+        expect(el.classList).toContain("scrolling-up");
+        // Now gone
+        await utils.timeout(custom_timeout / 2 + 1);
+        expect(el.classList).not.toContain("scrolling-up");
+
+        el.scrollTop = 100;
+        el.dispatchEvent(events.scroll_event());
+        await utils.animation_frame();
+        expect(el.classList).not.toContain("scroll-position-top");
+        expect(el.classList).not.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");
+
+        // Test for clearing the scrolling classes after a scroll stop
+        // Still there...
+        await utils.timeout(custom_timeout / 2);
+        expect(el.classList).toContain("scrolling-down");
+        // Now gone
+        await utils.timeout(custom_timeout / 2 + 1);
+        expect(el.classList).not.toContain("scrolling-down");
     });
 });