@studiometa/js-toolkit/services/ScrollService.js

A set of useful little bits of JavaScript to boost your project! 🚀

import { AbstractService } from "./AbstractService.js";
import { debounce } from "../utils/debounce.js";
import { PASSIVE_CAPTURE_EVENT_OPTIONS } from "./utils.js";
import { nextTick } from "../utils/nextTick.js";
class ScrollService extends AbstractService {
  static config = [[() => document, [["scroll", PASSIVE_CAPTURE_EVENT_OPTIONS]]]];
  props = {
    x: window.scrollX,
    y: window.scrollY,
    changed: {
      x: false,
      y: false
    },
    changedX: false,
    changedY: false,
    last: {
      x: window.scrollX,
      y: window.scrollY
    },
    lastX: window.scrollX,
    lastY: window.scrollY,
    delta: {
      x: 0,
      y: 0
    },
    deltaX: 0,
    deltaY: 0,
    max: {
      x: document.scrollingElement.scrollWidth - window.innerWidth,
      y: document.scrollingElement.scrollHeight - window.innerHeight
    },
    maxX: document.scrollingElement.scrollWidth - window.innerWidth,
    maxY: document.scrollingElement.scrollHeight - window.innerHeight,
    progress: {
      x: 0,
      y: 0
    },
    progressX: 0,
    progressY: 0,
    direction: {
      x: "NONE",
      y: "NONE"
    },
    isUp: false,
    isRight: false,
    isDown: false,
    isLeft: false
  };
  updateProps() {
    const { props } = this;
    const yLast = props.y;
    const xLast = props.x;
    props.y = window.scrollY;
    props.x = window.scrollX;
    props.changed.x = props.changedX = props.x !== xLast;
    props.changed.y = props.changedY = props.y !== yLast;
    props.last.x = props.lastX = xLast;
    props.last.y = props.lastY = yLast;
    props.delta.x = props.deltaX = props.x - xLast;
    props.delta.y = props.deltaY = props.y - yLast;
    props.max.x = props.maxX = document.scrollingElement.scrollWidth - window.innerWidth;
    props.max.y = props.maxY = document.scrollingElement.scrollHeight - window.innerHeight;
    props.progress.x = props.progressX = props.max.x === 0 ? 1 : props.x / props.max.x;
    props.progress.y = props.progressY = props.max.y === 0 ? 1 : props.y / props.max.y;
    props.isUp = props.y < yLast;
    props.isRight = props.x > xLast;
    props.isDown = props.y > yLast;
    props.isLeft = props.x < xLast;
    props.direction.x = props.isRight ? "RIGHT" : props.isLeft ? "LEFT" : "NONE";
    props.direction.y = props.isDown ? "DOWN" : props.isUp ? "UP" : "NONE";
    return props;
  }
  update() {
    nextTick(() => this.updateProps()).then(() => this.trigger(this.props));
  }
  onScrollDebounced = debounce(() => {
    this.update();
  }, 100);
  /**
   * Scroll handler.
   */
  handleEvent() {
    this.update();
    this.onScrollDebounced();
  }
}
function useScroll() {
  return ScrollService.getInstance();
}
export {
  ScrollService,
  useScroll
};
//# sourceMappingURL=ScrollService.js.map