Home

Usage

The ScrollTrackerComponentManager is a class that tracks whether a component is within your viewport based on your scroll position. Once a component is in/out your viewport it will trigger methods on the component such as enterView or leaveView.

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({
    container: window,
    element: 'element',

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

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

    inViewProgressEnabled: false,
    setDebugLabel: true,
    debugBorderColor: 'red',
    scrollThrottle: 100,
    resizeDebounce: 100,

    enableSmoothScroll: false,
    smoothScrollOptions: {
      damping: 0.1,
      thumbMinSize: 20,
      renderByPixels: true,
      alwaysShowTracks: false,
      continuousScrolling: true,
      wheelEventTarget: null,
      plugins: {},
    },
  });

• element - PropertyName of the component that contains the HTMLElement of the component.
• 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.
• 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.
• 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.
• componentId - PropertyName of the component that should contain a unique string for each added component.
• 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.

Smoothscroll ( EXAMPLE )

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

Removing components from the scrollTrackerComponentManager

  scrollTrackerComponentManager.removeComponentsFromScrollTracker(components);

Disposing scrollTrackerComponentManager

  scrollTrackerComponentManager.dispose();