A scroll event module
npm install scroll-callbackA scroll event listener module
``
yarn add scroll-callback
This module can be used to fire a callback on a page scroll. Many scenarios are handled.
You can:
- Fire a callback when an element reaches the top of the screen
- Fire a callback when an element reaches the bottom of the screen
- Fire a callback and return the element everytime the page scrolls
- Fire a callback when multiple elements reaches the top of the screen
- ...more!
This is element focused and can be used in many ways.
A work-in-progress JS module.
Built by: Mario Lo
`javascript
import {
scrollCallback,
scrollCallbackWithElement,
scrollCallbackWithElements,
callbackAtElement,
callbackAtElements,
callbackAtElementSurface
} from 'scroll-callback';
(() => {
scrollCallback(callback(), 1000);
scrollCallbackWithElement(callback(), 1000, 'html-id');
scrollCallbackWithElements(callback(), 1500, 'html-class');
callbackAtElement(callback(), 1500, 'html-id');
callbackAtElements(callback(), 1500, 'html-class');
callbackAtElementSurface(callback(), 1500, 'html-id');
})();
`
Fires a callback as the page is scrolling.
Does not remove the event listener.
Fires the callback as the page is scrolling and returns the element in the callback.
Does not remove the event listener.
> Returns the element in callback
Pass in a class.
Fires the callback as the page is scrolling and returns the elements in the callback.
Does not remove the scroll event listener.
> Returns a elements in callback
Fires the callback when the element reaches the top of the page.
Removes the event listener.
> Returns the element in callback
Pass in class.
Fires the callback when the element reaches the top of the page.
Remove the event listener when all elements have been "called back"
> Returns the elements in callback
Fires the callback when the element reaches the bottom of the page.
Remove the scroll event listener
> Returns the element in callback
Gets the elements via class name. Calls querySelectorAll().
> Returns a static nodeList
type: function
This function will be called as the window is scrolling.
type: number
This is a wait time in milli-seconds. This is provided to give you custom timing to fire your callback.
type: string
An element ID in the DOM. If supplied, the element be returned to the callback.
type: string`
This should be the class name of the elements we want.
Please open a new issue and mention me to get the ball rolling. Thanks!
- Ability to handle multiple elements
Please message hello@websitesbymario.com for feature requests.
Please message hello@websitesbymario.com to report bugs.