One place for hosting & domains

      でスムーススクロールを実装する方法

      React でスムーススクロールを実装する方法


      はじめに

      スムーススクロールは、ボタンをクリックして(同じ) ページの別の箇所へジャンプさせる代わりに、スクロールアニメーションによって移動させる機能です。これはサイトの美観に差をつける繊細な機能です。

      この記事では、npm 上でreact-scrollパッケージを使用して、スムーズなスクロールを実装します。

      前提条件

      このチュートリアルを完了するには、次のものが必要です。

      このチュートリアルは、Node v13.14.0、npm v6.14.5、 reactv16.13.1、react-scroll v.1.7.16 で検証済です。

      このチュートリアルでは簡単なアプリを作成しますが、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には完成したプロジェクトすべてがあります。

      GitHub Repo Screenshot

      プロジェクトを複製するには、次のコマンドを使用します。

      git clone https://github.com/do-community/React-With-Smooth-Scrolling.git
      

      src/Components ディレクトリを調べると、Navbar.js ファイルがあります。このファイルの<Navbar>には、5つの<Section>それぞれに対応するnav-item が入っています。

      src/Components/Navbar.js

      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>の実際の位置がわかります。

      src/Components/App.js

      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 で確認できます。

      Screenshot of app in browser

      それではreact-scrollパッケージをインストールしてその機能を追加しましょう。npm にパッケージ情報が表示されます。

      react-scroll package on npm

      パッケージをインストールするには、次のコマンドを実行します。

      次に、Navbar.js ファイルのバックアップを開き、LinkanimateScrollという2つのインポートを追加します。

      src/Components/Navbar.js

      import { Link, animateScroll as scroll } from "react-scroll";
      

      使い勝手を良くするため、名前をanimatedScroll からscrollに変更したことがおわかりでしょう。

      インポートをすべて定義したら、nav-itemsを更新して<Link>コンポーネントを使用します。このコンポーネントには、プロパティがいくつかあります。ドキュメントページで、全内容を確認できます。

      さしあたり、次のプロパティ:activeClasstospysmoothoffsetdurationに注目してください。

      • 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> をクリックするか、ページの下部まで手動でスクロールしたときに、アクティブなクラスが確かに適用されているのがわかりました。

      Browser view of React app

      これを利用して、アクティブなクラスを作成し、リンクにアンダーラインを追加できます。src ディレクトリの App.css ファイルに、このCSSビットを追加できます。

      src/App.css

      .nav-item > .active {
          border-bottom: 1px solid #333;
      }
      

      これで、ブラウザに戻って、少しスクロールすると、正しい<Link> が下線表示されるはずです。

      Updated browser view of React app

      ステップ4 — 機能の追加

      最後に、このパッケージには機能が直接名称になったscrollToTopscrollToBottomなどの機能があります。さまざまなイベント同様扱えるものです。

      これらの機能に関連して、典型的にはnavbarのアプリケーションロゴからホームページか同じページの上部に移動させます。

      これらの機能の一つの呼び出し方の簡単な例として、次のように、nav-logoにページのトップに戻るクリックハンドラーを追加しました。

      src/Components/Navbar.js

      scrollToTop = () => {
          scroll.scrollToTop();
      };
      

      ブラウザに戻って、ページを下に向かってスクロールし、navbarのロゴをクリックすると、ページのトップに戻れるはずです。

      まとめ

      スムーススクロールは、アプリケーションに美的付加価値を大いに与える機能の1つです。react-scrollパッケージを使用すると、あまり多くのオーバーヘッドを必要とせずこの機能を活用できます。

      このチュートリアルでは、アプリにスムーススクロールを追加して、さまざまな設定を試しました。興味があれば、時間をかけてこのパッケージで利用できる他の機能やイベントも試してみましょう。



      Source link