A utility for auto-scroll when trigger location of event (i.e. mouse event) almost reach boundary.
- Install the latest version of autoscroll:
npm install --save autoscroll - At this point you can import
autoscroll:
import autoScroll from 'autoscroll';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;