Scroom
IntroductionAPI ReferenceCreateScroomOptionsPropsEventsDebugUsage with ReactExamples

CreateScroomOptions

The options you provided when creating scroom instance.

export interface CreateScroomOptions<T extends Element> {
  /** target element */
  target: T;
  /** trigger distance from the top/left of the viewport. unit: %. range: 0 - 1. default: 0.5 */
  offset?: number;
  /** scrolling detection frequency threshold. unit: px. default: 4 */
  threshold?: number;
  /** scrolling detection direction. default: vertical */
  direction?: "vertical" | "horizontal";
}

Props

Props of scroom instance.

/** scroom instance */
export interface ScroomInstance<T extends Element> {
  target: T;
  /** intersection observer inside this instance */
  observer: IntersectionObserver;
  /** add event listener */
  on: Emittery<ScroomEventMap<T>>["on"];
  /** add event listener for once */
  once: Emittery<ScroomEventMap<T>>["once"];
  /** remove event listener */
  off: Emittery<ScroomEventMap<T>>["off"];
  /** destroy instance and remove all event listeners */
  destroy: () => void;
}

Events

sc.on("enter", (data) => void);

Callback that fires when the edge of a step element enters the offset threshold.

Params:

  • target: Target Element

sc.on("leave", (data) => void);

Callback that fires when edge of a step element leaves the offset threshold.

Params:

  • target: Target Element

sc.on("progress", (data) => void);

Callback that fires the progress (0 - 1) a step has made through the threshold.

Params:

  • target: Target Element
  • progress: The percent of completion of the step (0 - 1)