@gen-tech/scroll-manager NPM

@gen-tech/scroll-manager

Improved Scroll Events & Scroll Management for web development

Supports horizontal scroll
Written with Typescript
Built with Rxjs

Installation

npm install @gen-tech/scroll-manager --save

Usage

import scrollManager from "@gen-tech/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
});