feat(core dom): Add get_scroll_x and get_scroll_y helper methods to get the horizontal/vertical scrolling position.

Author: thet

src/core/dom.js

@@ -270,6 +270,38 @@ const find_scroll_container = (el, direction, fallback = document.body) => {
     return fallback;
 };
 
+/**
+ * Get the horizontal scroll position.
+ *
+ * @param {Node} scroll_reference - The element to get the scroll position from.
+ *
+ * @returns {number} The horizontal scroll position.
+ */
+const get_scroll_x = (scroll_reference) => {
+    // scroll_listener == window: window.scrollX
+    // scroll_listener == html: html.scrollLeft == window.scrollX
+    // scroll_listener == DOM node: node.scrollLeft
+    return typeof scroll_reference.scrollLeft !== "undefined"
+        ? scroll_reference.scrollLeft
+        : scroll_reference.scrollX;
+};
+
+/**
+ * Get the vertical scroll position.
+ *
+ * @param {Node} scroll_reference - The element to get the scroll position from.
+ *
+ * @returns {number} The vertical scroll position.
+ */
+const get_scroll_y = (scroll_reference) => {
+    // scroll_listener == window: window.scrollY
+    // scroll_listener == html: html.scrollTop == window.scrollY
+    // scroll_listener == DOM node: node.scrollTop
+    return typeof scroll_reference.scrollTop !== "undefined"
+        ? scroll_reference.scrollTop
+        : scroll_reference.scrollY;
+};
+
 /**
  * Get data stored directly on the node instance.
  * We are using a prefix to make sure the data doesn't collide with other attributes.
@@ -351,6 +383,8 @@ const dom = {
     create_from_string: create_from_string,
     get_css_value: get_css_value,
     find_scroll_container: find_scroll_container,
+    get_scroll_x: get_scroll_x,
+    get_scroll_y: get_scroll_y,
     get_data: get_data,
     set_data: set_data,
     delete_data: delete_data,

src/core/dom.test.js

@@ -710,6 +710,62 @@ describe("core.dom tests", () => {
         });
     });
 
+    describe("get_scroll_y", function () {
+        it("get vertical scroll from window", function (done) {
+            jest.replaceProperty(window, "scrollY", 2000);
+            expect(dom.get_scroll_y(window)).toBe(2000);
+            done();
+        });
+
+        it("get vertical scroll from window when scrollY is 0", function (done) {
+            jest.replaceProperty(window, "scrollY", 0);
+            expect(dom.get_scroll_y(window)).toBe(0);
+            done();
+        });
+
+        it("get vertical scroll from an element", function (done) {
+            const el = document.createElement("div");
+            jest.spyOn(el, "scrollTop", "get").mockReturnValue(2000);
+            expect(dom.get_scroll_y(el)).toBe(2000);
+            done();
+        });
+
+        it("get vertical scroll from an element when scrollTop is 0", function (done) {
+            const el = document.createElement("div");
+            jest.spyOn(el, "scrollTop", "get").mockReturnValue(0);
+            expect(dom.get_scroll_y(el)).toBe(0);
+            done();
+        });
+    });
+
+    describe("get_scroll_x", function () {
+        it("get horizontal scroll from window", function (done) {
+            jest.replaceProperty(window, "scrollX", 2000);
+            expect(dom.get_scroll_x(window)).toBe(2000);
+            done();
+        });
+
+        it("get horizontal scroll from window when scrollX is 0", function (done) {
+            jest.replaceProperty(window, "scrollX", 0);
+            expect(dom.get_scroll_x(window)).toBe(0);
+            done();
+        });
+
+        it("get horizontal scroll from an element", function (done) {
+            const el = document.createElement("div");
+            jest.spyOn(el, "scrollLeft", "get").mockReturnValue(2000);
+            expect(dom.get_scroll_x(el)).toBe(2000);
+            done();
+        });
+
+        it("get horizontal scroll from an element when scrollLeft is 0", function (done) {
+            const el = document.createElement("div");
+            jest.spyOn(el, "scrollLeft", "get").mockReturnValue(0);
+            expect(dom.get_scroll_x(el)).toBe(0);
+            done();
+        });
+    });
+
     describe("set_data, get_data, delete_data", function () {
         it("can be used to store and retrieve data on DOM nodes.", function () {
             const el = document.createElement("div");