scrollcontroller.ts

interface ScrollSectionConfig {
  height : number;
  speed : number;
}

interface Vector {
  x : number;
  y : number;
}

interface ScrollConfig {
  section : ScrollSectionConfig;
  gap : ScrollSectionConfig;
  itemIdentifiers : string;
}

class ScrollController {

  private readonly items = document.querySelectorAll(this.config.itemIdentifiers);

  constructor(
    private readonly config : ScrollConfig,
  ) {

  }

  registerEvent() {
    // https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily

    window.addEventListener('DOMMouseScroll', this.eventHandler, false);
    window.addEventListener('wheel', this.eventHandler);
    window.addEventListener('mousewheel', this.eventHandler);
    window.addEventListener('touchmove', this.eventHandler);

    document.addEventListener('wheel', this.eventHandler, {passive: false}); // Disable scrolling in Chrome
    document.addEventListener('mousewheel', this.eventHandler); // older browsers, IE
    document.addEventListener('keydown', this.keydownHandler);
  }

  deregisterEvent() {
    window.removeEventListener('DOMMouseScroll', this.eventHandler);
    window.removeEventListener('wheel', this.eventHandler);
    window.removeEventListener('mousewheel', this.eventHandler);
    window.removeEventListener('touchmove', this.eventHandler);

    document.removeEventListener('wheel', this.eventHandler);
    document.removeEventListener('mousewheel', this.eventHandler);
    document.removeEventListener('keydown', this.keydownHandler);
  }

  private handle ({ x, y } : Vector) {
    const modifier = this.config.section.speed;

    const newPos : Vector = {
      x: this.round(x * modifier + window.scrollX),
      y: this.round(y * modifier + window.scrollY),
    };

    console.log({ x, y });

    this.updateScrollPosition(newPos);

    return false;
  }

  /* TODO create scroll easing function */
  private keydownHandler = (event : KeyboardEvent) => {
    const keys = {
      "Space": 100,
      "PageUp": -window.innerHeight,
      "PageDown": window.innerHeight,
      "Home": 0,
      "ArrowUp": 0,
      "ArrowDown": 0,
      "ArrowLeft": 0,
      "ArrowRight": 0,
    };
    if (keys[event.code]) {
      console.log(event);
      this.preventDefault(event);
      this.handle({ x: 0, y: keys[event.code] });
      return false;
    }
  };

  private eventHandler = (event : any) => {
    this.preventDefault(event);
    console.log(event);
    this.handle({ x: event.deltaX, y: event.deltaY });
    return false;
  };

  private preventDefault (event : Event) {
    event.preventDefault();
    event.stopImmediatePropagation();
    event.returnValue = false;
  }

  private updateScrollPosition({ x, y } : Vector) {
    window.scrollTo(x, y);
  }

  private round(number : number, places = 0) {
    const precision = Math.pow(10, places);
    return Math.round(number * precision) / precision;
  }
}

(() => {
  const controller = new ScrollController({
    section: {
      speed: 0.2,
      height: window.innerHeight,
    },
    gap: {
      speed: 2,
      height: window.innerHeight * 2,
    },
    itemIdentifiers: '.section',
  });

  controller.registerEvent();
})();