react-to-target-auto-scroll

v1.0.5

A React auto scroll component which scrolls to a given target position, supports linear and eased scrolling

react reactjs react-component auto-scroll auto scroll scrolling auto-scrolling scroll-component target-scroll

33/weekUpdated 3 years agoMITUnpacked: 69.0 KB

npm install react-to-target-auto-scroll

ReactAutoScroll

This component is a simple react auto scroll component which should be wrapped around a scrollable component and requires a ref to the container that it will scroll vertically.

If you'd like to see more different kinds of easeTypes, then feel free to check out the github project.

$3

js
export default class ScrollExample extends Component {
  render() {
    return (
              targetPosition={900}
        easeType={'linear'}
        speed={5}
        updateInterval={40}
        onScrollingDone={() => console.log('scrolling finished')}
        scrollTargetRef={this.refs.scrollExample}
        isEnabled
      >
                  ref="scrollExample"
          style={{ overflow: 'scroll', backgroundColor: 'red', width: '300px', height: '300px' }}
          >
           
            content


     
    );
  }
}

$3

`js targetPosition={900} easeType={'accelerated'} speed={0.05} updateInterval={40} onScrollingDone={() => console.log('accelerated scrolling finished')} scrollTargetRef={this.refs.scrollExample} isEnabled >`

`$3`


This also works with the infinite scroll component, exactly the same way:

js
      targetPosition={900}
    easeType={'accelerated'}
    speed={0.05}
    updateInterval={40}
    onScrollingDone={() => console.log('accelerated scrolling finished')}
    scrollTargetRef={this.refs.scrollExample}
    isEnabled
  >

stuff``