autoscroll

autoscroll

A utility for auto-scroll when trigger location of event (i.e. mouse event) almost reach boundary.

Installation

1. Install the latest version of autoscroll:

  npm install --save autoscroll

1. At this point you can import autoscroll:

import autoScroll from 'autoscroll';

Example

import React, { PureComponent } from 'react';
import autoScroll from 'autoscroll';

class Example extends PureComponent {
    refContent = (content) => {
        this.content = content;
    }

    actions = {
        onMouseMove: (e) => {
            // Start auto scrolling
            autoScroll.run(e, this.content);
        },
        onMouseOut: (e) => {
            // Stop auto scrolling if any
            autoScroll.end();
        }
    };

    render() {
        return (
            <div
                style={{
                    height: 500,
                    overflow: 'auto'
                }}
                ref={this.refContent}
                onMouseMove={this.actions.onMouseMove}
                onMouseOut={this.actions.onMouseOut}
            >
                <div
                    style={{
                        height: 1000,
                        backgroundColor: 'yellow'
                    }}
                />
            </div>
        );
    }
}

export default Example;

License

MIT