Get the direction of scrolling - as an observable ✨
$ npm install scrolldir-observableimport scrollDirObservable from 'scrolldir-observable';
// will react on scroll events that happen on the document
const scrollDir$ = scrollDirObservable(window.document);
scrollDir$.subscribe(dir => {
console.log(dir); // 'up' or 'down', depending on the scroll direction
});⚠ The observable only emits values on the first scroll or when the scroll direction changes. So if the user e.g. scrolls down for 2 seconds, the observable will emit the value down only once.
In case you want to use this library via script tags, you can do it like this
<!DOCTYPE html>
<html>
<head>
<script type="module" src="scrolldir-observable/dist/bundles/scrolldir-observable.es.min.js"></script>
<script nomodule src="scrolldir-observable/dist/bundles/scrolldir-observable.umd.min.js"></script>
</head>
...
</html> It tries to load the library as an ES module and if that is not supported, it will fall back to an UMD module. Further details can be found in Jake Archibald's great article ECMAScript modules in browsers.
scrollDirObservable(element: HTMLElement | Document, windowElem: Window = window): Observable<Directions>
element: Some html element or the document on which scroll directions should be observed.
windowElem: The global window object - defaults to window - if you use this library directly in the browser, you need not to care about this parameter.
String, which describes the direction of the scroll.
-
npm run build: compiles library into the dist folder:- standalone (used, if consumers want to bundle it themselves):
dist/index.jsdist/index.es.js
- bundles (direct usage via script tags (see Usage)):
dist/bundles/scrolldir-observable.es.min.jsdist/bundles/scrolldir-observable.umd.min.js
- types:
dist/types/index.d.ts
- standalone (used, if consumers want to bundle it themselves):
-
npm test: executes all tests
MIT