Tutorial
React でスムーススクロールを実装する方法
はじめに
スムーススクロールは、ボタンをクリックして(同じ) ページの別の箇所へジャンプさせる代わりに、スクロールアニメーションによって移動させる機能です。これはサイトの美観に差をつける繊細な機能です。
この記事では、npm 上でreact-scroll
パッケージを使用して、スムーズなスクロールを実装します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- インストール済の有効なGit 。Gitのセットアップについては、チュートリアルGit入門を参照してください。
- ローカルにインストール済のNode.js。チュートリアルNode.jsをインストールしてローカル開発環境を構築する方法を参照してください。
このチュートリアルは、Node v13.14.0、npm v6.14.5、 react
v16.13.1、react-scroll
v.1.7.16 で検証済です。
クイックスタート: react-scroll
を使用する
このチュートリアルでは簡単なアプリを作成しますが、react-scroll
機能の概要を手軽に知りたいなら、この要約版を参照してください。
react-scroll
をインストールします。
npm i -S react-scroll
react-scroll
パッケージをインポートします。
import { Link, animateScroll as scroll } from "react-scroll";
リンクコンポーネントを追加します。<Link />
コンポーネントは、アプリの任意の領域をポイントします。
<Link to="section1">
さらに踏み込んで、スムーススクロール付きのReact アプリを作成しましょう。
ステップ1 — React アプリのインストールと実行
便宜上、チュートリアルでは、上部にナビゲーションバー(navbar)と5つのセクションに別れたコンテンツがあるstarter React project(Create React App 2.0を使用)を使用します。
navbar のリンクは、この時点でアンカータグだけですが、スムーススクロールが有効になるようにまもなく更新します。
プロジェクトはReact With Smooth Scrollingにあります。リンクがstartbranch 向けであることに注意してください。master branchには完成したプロジェクトすべてがあります。
プロジェクトを複製するには、次のコマンドを使用します。
git clone https://github.com/do-community/React-With-Smooth-Scrolling.git
src/Components
ディレクトリを調べると、Navbar.js
ファイルがあります。このファイルの<Navbar>
には、5つの<Section>
それぞれに対応するnav-item
が入っています。
import React, { Component } from "react";
import logo from "../logo.svg";
export default class Navbar extends Component {
render() {
return (
<nav className="nav" id="navbar">
<div className="nav-content">
<img
src={logo}
className="nav-logo"
alt="Logo."
onClick={this.scrollToTop}
/>
<ul className="nav-items">
<li className="nav-item">Section 1</li>
<li className="nav-item">Section 2</li>
<li className="nav-item">Section 3</li>
<li className="nav-item">Section 4</li>
<li className="nav-item">Section 5</li>
</ul>
</div>
</nav>
);
}
}
src
ディレクトリでApp.js
ファイルを開くと、<Navbar>
と5つの<Section>
の実際の位置がわかります。
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Navbar from "./Components/Navbar";
import Section from "./Components/Section";
import dummyText from "./DummyText";
class App extends Component {
render() {
return (
<div className="App">
<Navbar />
<Section
title="Section 1"
subtitle={dummyText}
dark={true}
id="section1"
/>
<Section
title="Section 2"
subtitle={dummyText}
dark={false}
id="section2"
/>
<Section
title="Section 3"
subtitle={dummyText}
dark={true}
id="section3"
/>
<Section
title="Section 4"
subtitle={dummyText}
dark={false}
id="section4"
/>
<Section
title="Section 5"
subtitle={dummyText}
dark={true}
id="section5"
/>
</div>
);
}
}
export default App;
各<Section>
コンポーネントには、タイトル
とサブタイトル
があります。
このプロジェクトは、各セクションでdummyTextを使用しているので、コードの繰り返しを減らすため、このテキストをDummyText.js
ファイルに追加し、それを各<Section>
コンポーネントにインポートして渡しました。
アプリを実行するには、次のコマンドを入力します。
- cd React-With-Smooth-Scrolling
- npm install
- npm start
これにより、アプリが開発モードで起動し、ファイルの保存時にアプリが自動で更新されます。ブラウザのlocalhost:3000
で確認できます。
ステップ2 — React-Scroll のインストールと設定
それではreact-scroll
パッケージをインストールしてその機能を追加しましょう。npm にパッケージ情報が表示されます。
パッケージをインストールするには、次のコマンドを実行します。
- npm install react-scroll
次に、Navbar.js
ファイルのバックアップを開き、Link
、animateScroll
という2つのインポート
を追加します。
import { Link, animateScroll as scroll } from "react-scroll";
使い勝手を良くするため、名前をanimatedScroll
からscroll
に変更したことがおわかりでしょう。
インポートをすべて定義したら、nav-items
を更新して<Link>
コンポーネントを使用します。このコンポーネントには、プロパティがいくつかあります。ドキュメントページで、全内容を確認できます。
さしあたり、次のプロパティ:activeClass
、to
、spy
、smooth
、offset
、duration
に注目してください。
activeClass
- 要素に達したときに適用されるクラスが適用されます。to
- スクロール先のターゲット。spy
-scroll
がターゲットの位置にあるとき、Link
を選択させます。smooth
- スクロールをアニメーション化します。offset
- 追加 px分(パディングのように)スクロールします。duration
-スクロールアニメーションの完了までにかかる時間数字か関数が入ります。
to
プロパティは、コンポーネントにスクロール先の要素を指示するので、最も重要です。この場合は各<Section>
になります。
offset
プロパティでは、<Section>
に到達するために必要な追加スクロール量を定義できます。
各<Link>
コンポーネントで使用するプロパティの例を次に示します。両者の唯一の違いは、to
プロパティで別の<Section>
をポイントしているところです。
<Link
activeClass="active"
to="section1"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
各nav-items
は適宜更新する必要があります。これらを追加したら、ブラウザに戻って(アプリは自動で再起動済のはずなので)、スムーススクロールが有効になったことが確認できるはずです。
ステップ3 — アクティブリンクのスタイリング
activeClass
プロパティを使用すると、to
要素がアクティブなときに、<Link>
コンポーネントに適用するクラスを定義できます。ページ上部にto
要素が表示されていれば、<Link>
がアクティブと判断されます。これは、<Link>
そのものをクリックするか、手動で<Section>
までスクロールすることがトリガーになります。
これを確認するために、Chrome DevTools を開き、次の通り5つ目の<Link>
を調査しました。<Link>
をクリックするか、ページの下部まで手動でスクロールしたときに、アクティブなクラスが確かに適用されているのがわかりました。
これを利用して、アクティブなクラスを作成し、リンクにアンダーラインを追加できます。src
ディレクトリの App.css
ファイルに、このCSSビットを追加できます。
.nav-item > .active {
border-bottom: 1px solid #333;
}
これで、ブラウザに戻って、少しスクロールすると、正しい<Link>
が下線表示されるはずです。
ステップ4 — 機能の追加
最後に、このパッケージには機能が直接名称になったscrollToTop
、scrollToBottom
などの機能があります。さまざまなイベント同様扱えるものです。
これらの機能に関連して、典型的にはnavbarのアプリケーションロゴからホームページか同じページの上部に移動させます。
これらの機能の一つの呼び出し方の簡単な例として、次のように、nav-logo
にページのトップに戻るクリックハンドラーを追加しました。
scrollToTop = () => {
scroll.scrollToTop();
};
ブラウザに戻って、ページを下に向かってスクロールし、navbarのロゴをクリックすると、ページのトップに戻れるはずです。
まとめ
スムーススクロールは、アプリケーションに美的付加価値を大いに与える機能の1つです。react-scroll
パッケージを使用すると、あまり多くのオーバーヘッドを必要とせずこの機能を活用できます。
このチュートリアルでは、アプリにスムーススクロールを追加して、さまざまな設定を試しました。興味があれば、時間をかけてこのパッケージで利用できる他の機能やイベントも試してみましょう。