はじめに
Reactで、ページ上部にスクロールや指定のidやclassまでスクロールさせたいことがあったので、Reactで使えるスクローラー作りました。
react-smooth-scroller
Github: https://github.com/gurimon/react-smooth-scroller
Installation
$ npm i -S react-smooth-scroller
or
$ yarn add react-smooth-scroller
Usage
// ES2015 imports
import rsScroller from 'react-smooth-scroller';
// ES5 require
const rsScroller = require('react-smooth-scroller');
API
rsScroller#scrollToTop(option)
rsScroller.scrollToTop();
// custom
rsScroller.scrollToTop({ easing: 'linear', duration: 1500, frame: 20, revise: 100 });
rsScroller#scrollToTarget(classname, option)
rsScroller.scrollToTarget('hoge');
// custom
rsScroller.scrollToTarget('hoge', { easing: 'linear', duration: 1500, frame: 20, revise: 100 });
rsScroller#scrollReset()
option
Key | Type | Default | Description |
---|---|---|---|
easing | string | easeOutQuint | easing |
duration | number | 1000 | all time |
frame | number | 13 | one frame time |
revise | number | 0 | revise pixel |
easing
- linear
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeInSine
- easeOutSine
- easeInOutSine
- easeInExpo
- easeOutExpo
- easeInOutExpo
- easeInCirc
- easeOutCirc
- easeInOutCirc
- easeInElastic
- easeOutElastic
- easeInBack
- easeOutBack
- easeInOutBack
- easeInBounce
- easeOutBounce
- easeInOutBounce
Use with React
import React from 'react';
import rsScroller from 'react-smooth-scroller';
class Test extends Component {
onScrollTop() {
rsScroller.scrollToTop();
}
onScrollTarget(classname) {
rsScroller.scrollToTarget(classname);
}
render() {
return (
<div className="test">
<h1>react-smooth-scroller</h1>
<div className="test__desc">
<p>test</p>
<a onClick={() => this.onScrollTarget('hoge')} className="btn">button-A</a>
</div>
<a onClick={() => this.onScrollTop()} className="btn hoge">button-B</a>
</div>
)
}
});