scroll-custom
v0.1.1
Published
Overwrites native DOM scrolling with a customisable physics-based animation.
Downloads
2
Maintainers
Readme
scroll-custom
This module overwrites the native scrolling in DOM with a customisable script. That's it, really.
I've only tested this with Chromium engines because I intend to use it with Electron apps, but feel free to use it wherever.
How to use
Requiring scroll-custom returns a Scroller
constructor:
const Scroller = require('scroll-custom');
let DOMScroller = new Scroller();
To bind the scroller to an element, use the .elem
method:
DOMScroller.elem(document.getElementById('element'));
Customisables
To specify direction, friction, magnitude etc., do the same:
DOMScroller.direction('vertical'); // vertical / horizontal, may expand to all directions later
DOMScroller.friction(0.5); // Default 2 - larger values slows scroll down faster
DOMScroller.magnitude(0.1); // Default 0.2 - initial velocity of scroll
DOMScroller.breakAt(1); // Default 1 - greatest velocity to break animation at
.direction
specifies which axis the element will scroll through. Default is 'vertical'
, if the string specified is neither 'vertical'
nor 'horizontal'
, it will default to vertical.
.friction
is a constant which reduces the velocity by a set amount every animation frame.
.magnitude
is the velocity added to the scroll whenever the scrollwheel is applied.
.breakAt
sets the velocity to 0 when the absolute velocity of scrolling decreases to the number specified.
Chaining parameter changes
All the methods specified so far return the parent instance of the Scroller
object, so you can chain them like so:
DOMScroller.elem(document.getElementById('element'))
.direction('vertical')
.friction(0.5)
.magnitude(0.1)
.breakAt(1);
Initialising scroll animation
Scrolling is not overwritten by default, one must initialise the Scroller
object, like so:
DOMScroller.start();
To stop the animation at any time and revert back to the default DOM animation, do:
DOMScroller.stop();
To check whether Scroller
is active, use DOMScroller.on
.
Example
const Scroller = require('scroll-custom');
let DOMScroller = new Scroller();
DOMScroller.elem(document.body)
.direction('vertical')
.friction(0.5)
.magnitude(0.1)
.breakAt(1);
document.body.addEventListener('click', () => {
if (DOMScroller.on) DOMScroller.stop();
else DOMScroller.start();
})