Skip to content

seawind543/autoScroll

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

autoscroll

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

NPM

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

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published