0.0.10 • Published 6 years ago
scroll-data v0.0.10
Scroll Data
Get the current scroll direction, position and speed. Both vertically and horizontally.
Very useful for showing/hiding a top navbar based on the scroll direction and speed.
Installation
npm install --save scroll-data
Usage
Require the module first.
const ScrollData = require('scroll-data');
Then set your own scrollListener.
window.addEventListener('scroll', () => {
console.log(ScrollData());
});
In case you're only interested in the vertical or horizontal data, just pass in vertical
or horizontal
as a parameter.
window.addEventListener('scroll', () => {
console.log(ScrollData('vertical'));
});
Example output
The direction property in the object can contain up
, down
, left
, right
and unchanged
.
{
vertical: {
direction: "up",
position: 100
speed: 12
},
horizontal: {
direction: "right",
position: 80,
speed: 64
},
}
Example usage
const myNavbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
let data = ScrollData('vertical');
if (data.direction === 'up' && data.speed > 10 && !myNavbar.classList.contains('is-visible')) {
myNavbar.classList.add('is-visible');
}
if (data.direction === 'down' && data.speed > 10 && myNavbar.classList.contains('is-visible')) {
myNavbar.classList.remove('is-visible');
}
});