【React】overflow: scrollコンテンツにスムーススクロールを実装する #JavaScript

初投稿です。

最近業務でReactを使い始めました。
難しいですが楽しいですよね。React。
さて、今回はoverflow: scroll コンテンツ内でスムーススクロールさせる方法をご紹介します。
方法はとても簡単なのですが、今回使用したreact-scrollというライブラリの公式サンプルが詰め込むだけ詰め込んだ形で私的には読みづかったのでピンポイントで実装方法をご紹介します。

実装方法

方法はざっくり2パターンあると思っていて、

CSSプロパティ scroll-behavior: smooth を使う
JSで書く(今回はreact-scrollというライブラリを使う)

1.に関してはCSS1つ追加するだけなのでシンプルです。ただし、Chrome,FireFox以外のブラウザではPolyfillしないと動作しないので注意して下さい。can i use scroll-behavior?

今回は2の方法を詳しく説明します。

react-scrollを使う

react-scrollはReact Componentにスクロール機能を与えるライブラリです。ライセンスはMITです。早速ですがoverflow:scroll内の任意地点までスムーススクロールさせる方法を見ていきましょう。

import React,{ Component } from 'react'
import { Link } from 'react-scroll'

class OverFlowContent extends Component {
  render() {
    return (
      <div>
        <Link to="link1" smooth={true} duration={250} containerId="overFlowScrollArea">リンク１へ</Link>
        <Link to="link2" smooth={true} duration={250} containerId="overFlowScrollArea">リンク2へ</Link>
        <Link to="link3" smooth={true} duration={250} containerId="overFlowScrollArea">リンク3へ</Link>
        <div id="overFlowScrollArea">
          <div name="link1">リンク１</div>
          <div name="link2">リンク２</div>
          <div name="link3">リンク３</div>
        </div>
      </div>
    }
  )
}

import { Link } from 'react-scroll'

スムーススクロールを実装したい場合、読み込むのはたったこれだけです。ポイントは２つで、

<Link />Componentのto="link1と"name="link1"がそれぞれリンクになっている
<Link />ComponentのcontainerId="overFlowScrollArea"がスクロールイベントをリッスンして、実際にスクロールを実行するコンテナとなる

公式は<Element />Componentをimportしていたり、不要なclassやIDの指定があり少々混乱するかもしれません。基本的には<Link />Componentにto="hoge"とそれに対応するname="hoge"があればリンクとして機能します。そして今回はスムーススクロールなので、smooth={true}にしておきduration={}は好きな速さに設定してください。

そして大事なのはcontainerIdを確実に指定することです。これがないと、overflow: scrollのコンテンツ内でスクロールしません。

まとめ

はやくscroll-behavior: smoothが標準実装された世界線に行きたい。