@thalesrc/scroll-manager

Scroll Manager

Improved Scroll Events & Scroll Management for web development

Supports horizontal scroll

Written with Typescript

Built with Rxjs

Installation

npm install @thalesrc/scroll-manager --save

Usage

import scrollManager from "@thalesrc/scroll-manager";

const target = document.querySelector(".scrollable-div");

// Create an observer for the target
const observer = scrollManager.observe(target);

/**
 * Subscribe to targets scrollY events
 */
observer.scrollY.subscribe(position => {
  console.log(position);
});

/**
 * To track window scroll, use `root`
 */
scrollManager.root.scrollY.subscribe(position => {
  console.log(position);
});

Some of Available Scroll Event Streams

// Scroll Start
observer.scrollStart.subscribe(position => {
  // {top: number, left: number}
});

// Scroll End
observer.scrollEnd.subscribe(position => {
  // {top: number, left: number}
});

// Scroll Direction Change
observer.scrollDirectionChange.subscribe(position => {
  // 1, 2, 4, 8 (TOP, BOTTOM, LEFT, RIGHT)
});

// Scrolling Down
observer.scrollingDown.subscribe(position => {
  // number
});


// Remaining scrollable area to the right in pixels
observer.remainingX.subscribe(position => {
  // number
});

Performance

By default, scroll-manager throttles scroll events in every 90ms for performance prospects

If you want to capture all events use const observer = scrollManager.observe(target, 0);

Api Documentation

thalesrc.github.io/scroll-manager

License

MIT