@thalesrc/scroll-manager
v1.1.2
Published
Improved Scroll Events & Scroll Management
Downloads
3
Maintainers
Readme
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