Configurable edge scrolling for web pages.
Scrolls the page when the cursor goes near the edges of the window.
How to use
Include in script tag
edge-scroll.min.js on your web page in a
<script> tag, then in
EdgeScroll passing the radius from the edges to start scrolling
at and the maximum scrolling speed (in pixels per second).
var edgeScroll = 100 800;
Include self executing script tag
edge-scroll-auto.min.js in a script tag on your web page
to use default values of 100 pixel radius and 750 pixel per second speed.
No further steps are necessary.
Include as part of a module loader
npm install edge-scroll
In main JS file:
import EdgeScroll from 'edge-scroll' const edgeScroll = new EdgeScroll(120, 750)
The EdgeScroll object has some methods you may find useful
onScroll(Function handler)adds an event listener to listen for scroll events
offScroll(Function handler)removes a previously added event listener
The handlers are called with the following arguments:
- Number scrollX : the X scroll position of the window
- Number scrollY : the Y scroll position of the window
- Number innerWidth : the width of the window
- Number innerHeight : the height of the window
var edgeScroll = 80 750;edgeScroll;
The reason to use EdgeScroll handlers rather than just using
to prevent layout thrashing: all those properties are cached on the EdgeScroll object once per
animation frame so the browser doesn't have to do a reflow to access them.
You can access them at any time, but the handlers give them to you every time the page scrolls.
var edgeScroll = new EdgeScroll(100, 750); console.log(edgeScroll.scrollX); console.log(edgeScroll.scrollY); console.log(edgeScroll.innerWidth); console.log(edgeScroll.innerHeight);
You can specify deadzones where scrolling should not occur. If you have something in the corner that you'd like to be clickable, without causing the window to scroll while hovering over it for example.
addDeadzone(Element elem)Adds mouseenter and mouseleave event listeners to prevent scrolling on the supplied HTML element.
removeDeadzone(Element elem)Removes a previously added deadzone
var edgeScroll = 100 750;edgeScroll