fix(pat scroll-marker): Use the correct scroll container.

The scroll container was potentially wrong and is a parent of the
hash-link target contents and not a parent of the navigation where
pat-scroll-container (or pat-navigation) are defined upon.

Author: thet

src/pat/scroll-marker/scroll-marker.js

@@ -50,7 +50,11 @@ class Pattern extends BasePattern {
                 )
         );
 
-        this.scroll_container = dom.find_scroll_container(this.el, "y", window);
+        // Find a possible scroll container based on the first target/content
+        // element in the observables map.
+        // Note, a Map's values method returns an iterator.
+        const first_target = this.observables.values().next()?.value.target;
+        this.scroll_container = dom.find_scroll_container(first_target, "y", window);
         // window.innerHeight or el.clientHeight
         const scroll_container_height =
             typeof this.scroll_container.innerHeight !== "undefined"

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

@@ -2,25 +2,35 @@ import Pattern from "./scroll-marker";
 import events from "../../core/events";
 import utils from "../../core/utils";
 
-async function create_scroll_marker({ options = {} } = {}) {
+async function create_scroll_marker({
+    options = {},
+    scroll_container_main = false,
+} = {}) {
     document.body.innerHTML = `
           <nav class="pat-scroll-marker">
             <a href="#id1">link 1</a>
             <a href="#id2">link 2</a>
             <a href="#id3">link 3</a>
           </nav>
 
-          <section id="id1">
-          </section>
+          <main>
+            <section id="id1">
+            </section>
 
-          <section id="id2">
-          </section>
+            <section id="id2">
+            </section>
 
-          <section id="id3">
-          </section>
+            <section id="id3">
+            </section>
+          </main>
         `;
     const el = document.querySelector(".pat-scroll-marker");
 
+    const main = document.querySelector("main");
+    if (scroll_container_main) {
+        main.style["overflow-y"] = "auto";
+    }
+
     const nav_id1 = document.querySelector("[href='#id1']");
     const nav_id2 = document.querySelector("[href='#id2']");
     const nav_id3 = document.querySelector("[href='#id3']");
@@ -31,6 +41,14 @@ async function create_scroll_marker({ options = {} } = {}) {
 
     // id1 not, id2 fully, id3 partly visible
 
+    jest.spyOn(main, "clientHeight", "get").mockReturnValue(100);
+    jest.spyOn(main, "getBoundingClientRect").mockImplementation(() => {
+        return {
+            top: 0,
+            bottom: 100,
+        };
+    });
+
     jest.replaceProperty(window, "innerHeight", 100);
     jest.spyOn(id1, "getBoundingClientRect").mockImplementation(() => {
         return {
@@ -72,6 +90,7 @@ async function create_scroll_marker({ options = {} } = {}) {
         id1: id1,
         id2: id2,
         id3: id3,
+        main: main,
     };
 }
 
@@ -177,4 +196,107 @@ describe("pat-scroll-marker", () => {
             expect(id3.classList.contains("scroll-marker-current")).toBe(false);
         });
     });
+
+    describe("2: Test on element as scroll container", () => {
+        it("2.1: default values, id3 is current", async () => {
+            // With the default values the baseline is in the middle and the
+            // content element side's are calculated from the top. id3 is therefore
+            // the current one, as it's top is nearer to the middle than the top of
+            // id2.
+
+            const { instance, nav_id1, nav_id2, nav_id3, id1, id2, id3, main } =
+                await create_scroll_marker({ scroll_container_main: true });
+
+            // Without any overflow settings in other containers, the scroll
+            // container is the window object.
+            expect(instance.scroll_container).toBe(main);
+
+            expect(nav_id1.classList.contains("in-view")).toBe(false);
+            expect(nav_id2.classList.contains("in-view")).toBe(true);
+            expect(nav_id3.classList.contains("in-view")).toBe(true);
+
+            expect(nav_id1.classList.contains("current")).toBe(false);
+            expect(nav_id2.classList.contains("current")).toBe(false);
+            expect(nav_id3.classList.contains("current")).toBe(true);
+
+            expect(id1.classList.contains("scroll-marker-current")).toBe(false);
+            expect(id2.classList.contains("scroll-marker-current")).toBe(false);
+            expect(id3.classList.contains("scroll-marker-current")).toBe(true);
+        });
+
+        it("2.2: distance 0, id2 is current", async () => {
+            const { nav_id1, nav_id2, nav_id3, id1, id2, id3 } =
+                await create_scroll_marker({
+                    options: {
+                        distance: 0,
+                    },
+                    scroll_container_main: true,
+                });
+
+            expect(nav_id1.classList.contains("in-view")).toBe(false);
+            expect(nav_id2.classList.contains("in-view")).toBe(true);
+            expect(nav_id3.classList.contains("in-view")).toBe(true);
+
+            expect(nav_id1.classList.contains("current")).toBe(false);
+            expect(nav_id2.classList.contains("current")).toBe(true);
+            expect(nav_id3.classList.contains("current")).toBe(false);
+
+            expect(id1.classList.contains("scroll-marker-current")).toBe(false);
+            expect(id2.classList.contains("scroll-marker-current")).toBe(true);
+            expect(id3.classList.contains("scroll-marker-current")).toBe(false);
+        });
+
+        it("2.3: distance 50, side bottom, id2 is current", async () => {
+            const { nav_id1, nav_id2, nav_id3, id1, id2, id3 } =
+                await create_scroll_marker({
+                    options: {
+                        distance: "50%",
+                        side: "bottom",
+                    },
+                    scroll_container_main: true,
+                });
+
+            expect(nav_id1.classList.contains("in-view")).toBe(false);
+            expect(nav_id2.classList.contains("in-view")).toBe(true);
+            expect(nav_id3.classList.contains("in-view")).toBe(true);
+
+            expect(nav_id1.classList.contains("current")).toBe(false);
+            expect(nav_id2.classList.contains("current")).toBe(true);
+            expect(nav_id3.classList.contains("current")).toBe(false);
+
+            expect(id1.classList.contains("scroll-marker-current")).toBe(false);
+            expect(id2.classList.contains("scroll-marker-current")).toBe(true);
+            expect(id3.classList.contains("scroll-marker-current")).toBe(false);
+        });
+
+        it("2.4: distance 50, side top, visibility: most-visible, id2 is current", async () => {
+            // Here we have again the default values, this time explicitly set.
+            // Only the visibility is set to most-visible, which means that id2 is
+            // the current one,
+            //
+            const { nav_id1, nav_id2, nav_id3, id1, id2, id3 } =
+                await create_scroll_marker({
+                    options: {
+                        distance: "50%",
+                        side: "top",
+                        visibility: "most-visible",
+                    },
+                    scroll_container_main: true,
+                });
+
+            console.log(document.body.innerHTML);
+
+            expect(nav_id1.classList.contains("in-view")).toBe(false);
+            expect(nav_id2.classList.contains("in-view")).toBe(true);
+            expect(nav_id3.classList.contains("in-view")).toBe(true);
+
+            expect(nav_id1.classList.contains("current")).toBe(false);
+            expect(nav_id2.classList.contains("current")).toBe(true);
+            expect(nav_id3.classList.contains("current")).toBe(false);
+
+            expect(id1.classList.contains("scroll-marker-current")).toBe(false);
+            expect(id2.classList.contains("scroll-marker-current")).toBe(true);
+            expect(id3.classList.contains("scroll-marker-current")).toBe(false);
+        });
+    });
 });