editor.js/src/components/utils/scroll-locker.ts

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',
  }

  /**
   * Stores scroll position, used for hard scroll lock
   */
  private scrollPosition: null|number

  /**
   * 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;
  }
}