ジャンボモナカ

34歳のハゲデブがHTML5ハイブリッドアプリ開発プラットフォームmonacaを始めました。

Reactでscrollアニメーションを実装する

jQueryでアニメーションをさせながスクロール処理を行う時がまぁ〜まぁ〜あります。

$('html, body').animate({
    scrollTop:0,
    500,
    'swing',
    function(){
        console.log("done")
    }
});

で、Reactでスクロールをアニメーションさせたい場合、jQueryのanimateメソッドはないので、当然、jQueryのanimateメソッドを書いても動くはずがない。

なので、別の方法を探さないといけない。

Reactのプログラムにはアニメーションの処理が組み込まれていないので、react-scrollというプログラムを使ってスクロールさせる。

github.com

import 'react-app-polyfill/ie11';
import React from 'react';
import ReactDOM from 'react-dom';
import * as Scroll from 'react-scroll';

class Hoge extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    Scroll.animateScroll.scrollToTop();
  }
  render(){

  }
}

アニメーションをさせながらスクロールさせてwindowのトップに戻りたい場合は、scrollToTopメソッドを使えば実現できる。

特定の場所まで移動させたい場合は、selectorとして移動先のdomにname属性を設定させて、そのname属性の値を指定すれば移動させることができる。

import 'react-app-polyfill/ie11';
import React from 'react';
import ReactDOM from 'react-dom';
import * as Scroll from 'react-scroll';

class Hoge extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    /*
    <div name="foo"></div>のところまで移動させる
    */
    Scroll.scroller.scrollTo('foo',{
      duration: 800,
      delay: 0,
      smooth: 'easeInOutQuart'
    });
  }
  render(){

  }
}