Decouple the scroll event from the callback functions.
npm install scrollingDecouple the scroll event from the callback functions using requestAnimationFrames.
> It’s a very, very, bad idea to attach handlers to the window scroll event.
> Depending upon the browser the scroll event can fire a lot and putting code in the scroll callback will slow down any attempts to scroll the page (not a good idea). Any performance degradation in the scroll handler(s) as a result will only compound the performance of scrolling overall. Instead it’s much better to use some form of a timer to check every X milliseconds OR to attach a scroll event and only run your code after a delay (or even after a given number of executions – and then a delay).
> by John Resig.
$ npm install scrolling
$ bower install scrolling
$ component install pazguille/scrolling
scrolling component:js
var scrolling = require('scrolling');
`Now, define a listener for any HTMLElement:
js
function foo(event) {
console.log('foo'); // The function receive the scroll event as parameter.
console.log(event);
// The function context is the scrolled element.
console.log(this.scrollTop);
}
function bar() {
console.log('bar');
}
`Then, add some HTMLelements and its listeners to scrolling:
js
scrolling(document.querySelector('#box'), foo);
`
js
scrolling(window, bar);// or
scrolling(bar);
`API
$3
Adds an with a listener to the collection.
- el [optional] - A given HTMLElement to add to scroll.
- listener - A given listener to execute when the given el is scrolled.`js
scrolling(el, listener);
`$3
Removes an or its listener from the collection with the given el.
- el - A given HTMLElement to remove.
- listener [optional] - A given listener to remove.`js
scrolling.remove(el, listener);// or
scrolling.remove(el);
`Build
npm run dist
Test
Open file