Home

Description

The ScrollTrackerComponentManager is a Class that tracks whether a component is within your viewport based on your scroll position. It will/can handle the following for you:

• Trigger methods such as enterView or leaveView, once you component enters/leaves your viewport.
• Update your component with a progress value between 0 and 1. This is the progress of you components visibility.
• Enable smooth-scroll if needed.

Usage

Constructing and adding components.

  const components = [new DummyFoo(), new DummyFoo2()];
  const scrollTrackerComponentManager = new ScrollTrackerComponentManager();
 
  scrollTrackerComponentManager.addComponentsToScrollTracker(components);

Configuration - IScrollTrackerComponentManagerOptions.

Methods/properties of the component that are triggered which can be overwritten to add components with a different/custom interface.

  const scrollTrackerComponentManager = new ScrollTrackerComponentManager({
    // When this is set to a container other than the window, you need to set the html/body tag to a fixed height(100%) and overflow: hidden. And set the container to a fixed height(100%) and overflow: auto.
    container: window,
    element: 'element',

    enterView: 'enterView',
    leaveView: 'leaveView',
    beyondView: 'beyondView',
    inViewProgress: 'inViewProgress',

    inViewProgressThreshold: 'inViewProgressThreshold',
    enterViewThreshold: 'enterViewThreshold',
    componentId: 'componentId',
    hasEntered: 'hasEntered',
    currentViewProgress: 'currentViewProgress',
    scrollDirection: 'scrollDirection',

    inViewProgressEnabled: false,
    setDebugLabel: true,
    debugBorderColor: 'red',
    scrollThrottle: 100,
    resizeDebounce: 100,
    axis: Axis.Y,
    // When this is enabled you should set the container(body) to a fixed height(100%).
    enableSmoothScroll: false,
    smoothScrollOptions: {
      damping: 0.1,
      thumbMinSize: 20,
      renderByPixels: true,
      alwaysShowTracks: false,
      continuousScrolling: true,
      wheelEventTarget: null,
      plugins: {},
    },
  });

Methods

component methods

• enterView - MethodName of the component which is triggered when the component is within the viewport.
• leaveView - MethodName of the component which is triggered when the component has left the viewport.
• beyondView - MethodName of the component which is triggered everytime it is already scrolled passed a component, or when you would load a page while the scrollbar is already at the bottom or passed a component.
• inViewProgress(progress:number) - Method name of the component which is triggered every time the scroll-position changes and your component is within the viewport. This method will have the parameter progress which is a number between 0-1.

Properties

component props

• element - PropertyName of the component that contains the HTMLElement of the component.
• enterViewThreshold - PropertyName of the component that contains a number between 0 - 1. Setting this number to for example 0.5 will trigger the enterView method when the component is already visible for 50% within your viewport.
• inViewProgressThreshold - same as enterViewThreshold but then used as an offset from when your inViewProgress will start.
• hasEntered - PropertyName of the component that should is by default set to false. Will be set to value if it has passed the viewport once already.
• currentViewProgress - PropertyName of the component where we will store the progress of its visibility.
• componentId - PropertyName of the component that should contain a unique string for each added component.
• scrollDirection - PropertyName of the component where we will store the scrollDirection. Direction.FORWARD=0, Direction.BACK=1

global props

• container - the container that will be the scroll-area, default is the window.
• inViewProgressEnabled - When this is set to true we will call the method inViewProgress(progress). By default this is set to false.
• setDebugLabel - Enable/Disable visible scroll-tracker-points for each component, this will allow to you see when the transitionIn/Out is called.
• debugBorderColor - Color of the scroll-tracker-points (top/bottom line).
• resizeDebounce - Number in milliseconds to update the scroll-tracker-points with a debounce if the window is being resized.
• axis - You can pass Axis.Y or Axis.X in case you want to have horizontal scrolling -- Only applies when enableSmoothScroll is set to true
• scrollThrottle - Number in milliseconds used to throttle the scroll event. When enableSmoothScroll is set to true, this will be ignored.
• enableSmoothScroll - Enable/Disable smooth-scroll, see documentation below. By default this is set to false
• smoothScrollOptions - See documentation below. This is only applied when enableSmoothScroll is set to true.

Removing components from the scrollTrackerComponentManager

  scrollTrackerComponentManager.removeComponentsFromScrollTracker(components);

Disposing scrollTrackerComponentManager

  scrollTrackerComponentManager.dispose();

Example scroll component that can be added.

export default abstract class AbstractScrollComponent {
  public componentId: string;
  public enterViewThreshold: number = 0;
  public inViewProgressThreshold: number = 0;
  public currentViewProgress: number = 0;
  public hasEntered: boolean = false;
  static eventNamespaceCount: number = 10000000;
  public eventNamespace: string = '';
  public scrollDirection: Direction = Direction.FORWARD;

  constructor(private element: HTMLElement) {
    this.eventNamespace = '.' + ++AbstractScrollComponent.eventNamespaceCount;
    this.componentId = this.displayName + this.eventNamespace;
  }

  public inViewProgress(progress: number): void {
    console.log('inViewProgress', progress, this.componentId);
  }

  public enterView(): void {
    console.log('enterview', this.componentId);
  }

  public leaveView(): void {
    console.log('leaveView', this.componentId);
  }

  public beyondView(): void {
    console.log('beyondView', this.componentId);
  }

  public get displayName() {
    return this.element.getAttribute(`data-component`);
  }
}

Smoothscroll

Plugins

Our library contains the following plugins, but you can create custom plugins at any time.

• HorizontalScrollPlugin
• LockScrollPlugin

Documentation

In case you want to enable smooth-scroll, read their documentation and watch their demo for all the possibilities.