@payfit/unity-components
Version:
55 lines (54 loc) • 1.49 kB
JavaScript
import { useMediaQuery as e } from "./use-media-query.js";
import { useEffect as t, useRef as n, useState as r } from "react";
//#region src/hooks/use-scroll-direction.ts
var i = 10;
function a(e) {
let t = e.parentElement;
for (; t;) {
let e = getComputedStyle(t).overflowY;
if (e === "auto" || e === "scroll") return t;
t = t.parentElement;
}
return null;
}
function o(e) {
return e === window ? window.scrollY : e.scrollTop;
}
function s(e) {
if (e === window) return window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 1;
let t = e;
return t.scrollTop + t.clientHeight >= t.scrollHeight - 1;
}
function c(c) {
let l = e("(prefers-reduced-motion: reduce)"), [u, d] = r("idle"), f = n(null), p = n(0), m = n(0);
return t(() => {
if (l) {
d("idle");
return;
}
let e = (() => {
if (c?.current) return c.current;
if (f.current) {
let e = a(f.current);
if (e) return e;
}
return window;
})();
p.current = o(e), m.current = 0;
let t = () => {
let t = o(e);
if (t < 0) return;
if (s(e)) {
m.current = 0, p.current = t, d("up");
return;
}
let n = t - p.current;
m.current += n, p.current = t, m.current > i ? (m.current = 0, d("down")) : m.current < -10 && (m.current = 0, d("up"));
};
return e.addEventListener("scroll", t, { passive: !0 }), () => {
e.removeEventListener("scroll", t);
};
}, [l, c]), [f, l ? "idle" : u];
}
//#endregion
export { c as useScrollDirection };