2022-05-01 13:43:56 +02:00
|
|
|
import { isIosDevice } from '../utils';
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Utility allowing to lock body scroll on demand
|
|
|
|
*/
|
|
|
|
export default class ScrollLocker {
|
|
|
|
/**
|
|
|
|
* Style classes
|
|
|
|
*/
|
|
|
|
private static CSS = {
|
|
|
|
scrollLocked: 'ce-scroll-locked',
|
|
|
|
scrollLockedHard: 'ce-scroll-locked--hard',
|
2022-11-25 18:56:50 +01:00
|
|
|
};
|
2022-05-01 13:43:56 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Stores scroll position, used for hard scroll lock
|
|
|
|
*/
|
2022-11-25 18:56:50 +01:00
|
|
|
private scrollPosition: null|number;
|
2022-05-01 13:43:56 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Locks body element scroll
|
|
|
|
*/
|
|
|
|
public lock(): void {
|
|
|
|
if (isIosDevice) {
|
|
|
|
this.lockHard();
|
|
|
|
} else {
|
|
|
|
document.body.classList.add(ScrollLocker.CSS.scrollLocked);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Unlocks body element scroll
|
|
|
|
*/
|
|
|
|
public unlock(): void {
|
|
|
|
if (isIosDevice) {
|
|
|
|
this.unlockHard();
|
|
|
|
} else {
|
|
|
|
document.body.classList.remove(ScrollLocker.CSS.scrollLocked);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Locks scroll in a hard way (via setting fixed position to body element)
|
|
|
|
*/
|
|
|
|
private lockHard(): void {
|
|
|
|
this.scrollPosition = window.pageYOffset;
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
'--window-scroll-offset',
|
|
|
|
`${this.scrollPosition}px`
|
|
|
|
);
|
|
|
|
document.body.classList.add(ScrollLocker.CSS.scrollLockedHard);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Unlocks hard scroll lock
|
|
|
|
*/
|
|
|
|
private unlockHard(): void {
|
|
|
|
document.body.classList.remove(ScrollLocker.CSS.scrollLockedHard);
|
|
|
|
if (this.scrollPosition !== null) {
|
|
|
|
window.scrollTo(0, this.scrollPosition);
|
|
|
|
}
|
|
|
|
this.scrollPosition = null;
|
|
|
|
}
|
|
|
|
}
|