diff --git a/src/pat/scroll-box/documentation.md b/src/pat/scroll-box/documentation.md index a7a76ccbe..ee056f05b 100644 --- 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 index a9a8b545c..47261b494 100644 --- 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 @@ +
-
hello.
+
hello.
+
diff --git a/src/pat/scroll-box/scroll-box.js b/src/pat/scroll-box/scroll-box.js index 4d73ac32f..f73ff08ac 100644 --- a/src/pat/scroll-box/scroll-box.js +++ b/src/pat/scroll-box/scroll-box.js @@ -62,7 +62,6 @@ 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) { @@ -70,7 +69,7 @@ export default Base.extend({ 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 index 01eac0f9f..360e00a0d 100644 --- 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");