feat(misc): Added function to get the scrollTop value of an element o…

…r document
chfoidl · Sep 2, 2018 · daa160c · daa160c
1 parent de3c8fd
commit daa160c
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 11 deletions.
diff --git a/dist/browser-utils.es5.js b/dist/browser-utils.es5.js
@@ -47,4 +47,11 @@ var getEventPath = function (event) {
         : polyfill();
 };
 
-export { listToArray, elementMatches, isEventWithPath, getEventPath };
+var getScrollTop = function (target) {
+    if (target instanceof Element) {
+        return target.scrollTop;
+    }
+    return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+};
+
+export { listToArray, elementMatches, isEventWithPath, getEventPath, getScrollTop };
diff --git a/dist/browser-utils.umd.js b/dist/browser-utils.umd.js
@@ -53,10 +53,18 @@
             : polyfill();
     };
 
+    var getScrollTop = function (target) {
+        if (target instanceof Element) {
+            return target.scrollTop;
+        }
+        return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+    };
+
     exports.listToArray = listToArray;
     exports.elementMatches = elementMatches;
     exports.isEventWithPath = isEventWithPath;
     exports.getEventPath = getEventPath;
+    exports.getScrollTop = getScrollTop;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 

diff --git a/dist/lib/browser-utils.js b/dist/lib/browser-utils.js
@@ -1,8 +1,8 @@
 "use strict";
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
 Object.defineProperty(exports, "__esModule", { value: true });
-var elements_1 = require("./elements");
-exports.listToArray = elements_1.listToArray;
-exports.elementMatches = elements_1.elementMatches;
-var events_1 = require("./events");
-exports.isEventWithPath = events_1.isEventWithPath;
-exports.getEventPath = events_1.getEventPath;
+__export(require("./elements"));
+__export(require("./events"));
+__export(require("./misc"));
diff --git a/dist/lib/misc.js b/dist/lib/misc.js
@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getScrollTop = function (target) {
+    if (target instanceof Element) {
+        return target.scrollTop;
+    }
+    return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+};
diff --git a/dist/types/browser-utils.d.ts b/dist/types/browser-utils.d.ts
@@ -1,2 +1,3 @@
-export { listToArray, elementMatches } from "./elements";
-export { EventWithPath, isEventWithPath, getEventPath } from "./events";
+export * from "./elements";
+export * from "./events";
+export * from "./misc";
diff --git a/dist/types/misc.d.ts b/dist/types/misc.d.ts
@@ -0,0 +1 @@
+export declare const getScrollTop: (target: Window | Document | Element) => number;
diff --git a/src/browser-utils.ts b/src/browser-utils.ts
@@ -1,2 +1,3 @@
-export { listToArray, elementMatches } from "./elements";
-export { EventWithPath, isEventWithPath, getEventPath } from "./events";
+export * from "./elements";
+export * from "./events";
+export * from "./misc";
diff --git a/src/misc.ts b/src/misc.ts
@@ -0,0 +1,12 @@
+export const getScrollTop = (target: Window | Document | Element) => {
+    if (target instanceof Element) {
+        return target.scrollTop;
+    }
+
+    return (
+        window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop ||
+        0
+    );
+};
diff --git a/test/misc.test.ts b/test/misc.test.ts
@@ -0,0 +1,75 @@
+import { JSDOM } from "jsdom";
+import * as BrowserUtils from "../src/browser-utils";
+
+new JSDOM(`
+<!doctype html>
+<html>
+<body>
+    <ul>
+        <li></li>
+        <li class="target"></li>
+        <li></li>
+    </ul>
+</body>
+</html>
+`);
+
+describe("misc", () => {
+    it("should get scrollTop of document and window", () => {
+        expect(BrowserUtils.getScrollTop(document)).toBe(0);
+        expect(BrowserUtils.getScrollTop(window)).toBe(0);
+    });
+
+    it("should get scrollTop of document and window via pageYOffset", () => {
+        Object.defineProperty(window, "pageYOffset", {
+            value: 10,
+        });
+
+        expect(BrowserUtils.getScrollTop(document)).toBe(10);
+        expect(BrowserUtils.getScrollTop(window)).toBe(10);
+    });
+
+    it("should get scrollTop of document and window via documentElement.scrollTop", () => {
+        Object.defineProperty(window, "pageYOffset", {
+            value: undefined,
+            configurable: true,
+        });
+
+        Object.defineProperty(document.documentElement, "scrollTop", {
+            value: 11,
+            configurable: true,
+        });
+
+        expect(BrowserUtils.getScrollTop(document)).toBe(11);
+        expect(BrowserUtils.getScrollTop(window)).toBe(11);
+    });
+
+    it("should get scrollTop of document and window via body.scrollTop", () => {
+        Object.defineProperty(window, "pageYOffset", {
+            value: undefined,
+        });
+
+        Object.defineProperty(document.documentElement, "scrollTop", {
+            value: undefined,
+        });
+
+        Object.defineProperty(document.body, "scrollTop", {
+            value: 12,
+        });
+
+        expect(BrowserUtils.getScrollTop(document)).toBe(12);
+        expect(BrowserUtils.getScrollTop(window)).toBe(12);
+    });
+
+    it("should get scrollTop of an element", () => {
+        const t = document.createElement("div");
+
+        expect(BrowserUtils.getScrollTop(t)).toBe(0);
+
+        Object.defineProperty(t, "scrollTop", {
+            value: 20,
+        });
+
+        expect(BrowserUtils.getScrollTop(t)).toBe(20);
+    });
+});