A React auto scroll component which scrolls to a given target position, supports linear and eased scrolling
npm install react-to-target-auto-scrollThis 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.
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
``