From 52f4343f583d09bd65bc6de89306515eb768d30d Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Mon, 27 Jun 2022 15:47:01 +0200 Subject: [PATCH 1/3] maint(pat scroll box): Document that scroll-down and scroll-up classes are not cleared after scrolling has stopped. --- src/pat/scroll-box/documentation.md | 6 ++++-- src/pat/scroll-box/scroll-box.js | 3 ++- src/pat/scroll-box/scroll-box.test.js | 2 ++ 3 files changed, 8 insertions(+), 3 deletions(-) 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/scroll-box.js b/src/pat/scroll-box/scroll-box.js index 4d73ac32f..9f35fe46b 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) { @@ -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..52a50c73e 100644 --- a/src/pat/scroll-box/scroll-box.test.js +++ b/src/pat/scroll-box/scroll-box.test.js @@ -80,6 +80,8 @@ describe("pat-scroll-box", function () { 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"); From 61fa3d8469bbe0a7ec241f75c7a0fb500190e6f9 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Mon, 27 Jun 2022 15:48:44 +0200 Subject: [PATCH 2/3] maint(pat scroll box): Improve demo styles. --- src/pat/scroll-box/index.html | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) 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.
+
From 596fd06f87090201e72a4086e4ea0d3313197fae Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Mon, 27 Jun 2022 15:52:02 +0200 Subject: [PATCH 3/3] fix(pat scroll box): Fix issue where elastic scrolling on Safari would remove the scroll-position-top class for a moment when overscrolling on top. --- src/pat/scroll-box/scroll-box.js | 2 +- src/pat/scroll-box/scroll-box.test.js | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/pat/scroll-box/scroll-box.js b/src/pat/scroll-box/scroll-box.js index 9f35fe46b..f73ff08ac 100644 --- a/src/pat/scroll-box/scroll-box.js +++ b/src/pat/scroll-box/scroll-box.js @@ -69,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 && diff --git a/src/pat/scroll-box/scroll-box.test.js b/src/pat/scroll-box/scroll-box.test.js index 52a50c73e..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,6 +89,16 @@ 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.