Nutritious Pumpkin Meal

    edge-scroll

    1.0.2 • Public • Published

    edge-scroll

    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

    Include edge-scroll.js or edge-scroll.min.js on your web page in a <script> tag, then in your main JavaScript file, call EdgeScroll passing the radius from the edges to start scrolling at and the maximum scrolling speed (in pixels per second).

    var edgeScroll = new EdgeScroll(100, 800);

    Include self executing script tag

    Include edge-scroll-auto.js or 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

    Install:

    npm install edge-scroll
    

    In main JS file:

    import EdgeScroll from 'edge-scroll'
    
    const edgeScroll = new EdgeScroll(120, 750)
    

    Scroll Events

    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 = new EdgeScroll(80, 750);
     
    edgeScroll.onScroll(function (scrollX, scrollY, innerWidth, innerHeight) {
        console.log(scrollX);
        console.log(scrollY);
        console.log(innerWidth);
        console.log(innerHeight);
    });

    The reason to use EdgeScroll handlers rather than just using addEventListener('scroll') is 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);
    

    Dead Zones

    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 = new EdgeScroll(100, 750);
     
    edgeScroll.addDeadZone(document.getElementById('corner-widget'))

    Install

    npm i edge-scroll

    DownloadsWeekly Downloads

    3

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    17.4 kB

    Total Files

    7

    Last publish

    Collaborators

    • cutejs