Marc Mintel
5397309103
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 20s
Build & Deploy / 🧪 QA (push) Failing after 34s
Build & Deploy / 🏗️ Build (push) Has started running
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Smoke Test (push) Has been cancelled
Build & Deploy / ⚡ Lighthouse (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
57 lines
1.5 KiB
Plaintext
57 lines
1.5 KiB
Plaintext
import { progress } from 'motion-utils';
|
|
import { velocityPerSecond } from '../../../utils/velocity-per-second.mjs';
|
|
|
|
/**
|
|
* A time in milliseconds, beyond which we consider the scroll velocity to be 0.
|
|
*/
|
|
const maxElapsed = 50;
|
|
const createAxisInfo = () => ({
|
|
current: 0,
|
|
offset: [],
|
|
progress: 0,
|
|
scrollLength: 0,
|
|
targetOffset: 0,
|
|
targetLength: 0,
|
|
containerLength: 0,
|
|
velocity: 0,
|
|
});
|
|
const createScrollInfo = () => ({
|
|
time: 0,
|
|
x: createAxisInfo(),
|
|
y: createAxisInfo(),
|
|
});
|
|
const keys = {
|
|
x: {
|
|
length: "Width",
|
|
position: "Left",
|
|
},
|
|
y: {
|
|
length: "Height",
|
|
position: "Top",
|
|
},
|
|
};
|
|
function updateAxisInfo(element, axisName, info, time) {
|
|
const axis = info[axisName];
|
|
const { length, position } = keys[axisName];
|
|
const prev = axis.current;
|
|
const prevTime = info.time;
|
|
axis.current = element[`scroll${position}`];
|
|
axis.scrollLength = element[`scroll${length}`] - element[`client${length}`];
|
|
axis.offset.length = 0;
|
|
axis.offset[0] = 0;
|
|
axis.offset[1] = axis.scrollLength;
|
|
axis.progress = progress(0, axis.scrollLength, axis.current);
|
|
const elapsed = time - prevTime;
|
|
axis.velocity =
|
|
elapsed > maxElapsed
|
|
? 0
|
|
: velocityPerSecond(axis.current - prev, elapsed);
|
|
}
|
|
function updateScrollInfo(element, info, time) {
|
|
updateAxisInfo(element, "x", info, time);
|
|
updateAxisInfo(element, "y", info, time);
|
|
info.time = time;
|
|
}
|
|
|
|
export { createScrollInfo, updateScrollInfo };
|