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

提供：Dev Guides
移動先:案内、検索

序章

スムーズスクロールは、ボタンをクリックして同じページの別の部分に即座に移動する代わりに、ユーザーがスクロールアニメーションを介してそこに移動する場合です。 これは、見た目の美しさを変えるサイトの微妙なUI機能の1つです。

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

前提条件

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

このチュートリアルは、ノードv13.14.0、npm v6.14.5、react v16.13.1、およびreact-scrollv.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つの異なるコンテンツセクションがあるスターターReactプロジェクト（Create React App 2.0を使用）を使用します。

ナビゲーションバーのリンクは、現時点では単なるアンカータグですが、スムーズなスクロールを可能にするために、まもなく更新されます。

プロジェクトはReactWith SmoothScrollingにあります。 このリンクはstartブランチ用であることに注意してください。 master ブランチには、完了したすべての変更が含まれています。

プロジェクトのクローンを作成するには、次のコマンドを使用できます。 

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

src/Componentsディレクトリを調べると、<Navbar>と5つの異なる<Section>に対応するnav-itemsを含むNavbar.jsファイルが見つかります。 ]s。

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ファイルを開くと、5つの実際の<Section>とともに<Navbar>が含まれている場所がわかります。 「」

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>コンポーネントは、titleおよびsubtitleを取り込みます。

このプロジェクトではさまざまなセクションでダミーテキストを使用しているため、コードの繰り返しを減らすために、このテキストは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を追加します。

src / Components / Navbar.js 

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>コンポーネントに使用するプロパティの例を次に示します。 それらの唯一の違いは、それぞれが異なる<Section>を指しているため、toプロパティです。 

<Link
    activeClass="active"
    to="section1"
    spy={true}
    smooth={true}
    offset={-70}
    duration={500}
>

それに応じて、各nav-itemsを更新する必要があります。 これらを追加すると、ブラウザに戻って（アプリはすでに自動的に再起動されているはずです）、スムーズなスクロールが動作していることを確認できます。

ステップ3—アクティブリンクのスタイリング

activeClassプロパティを使用すると、to要素がアクティブなときに<Link>コンポーネントに適用するクラスを定義できます。 <Link>は、そのto要素がページの上部近くに表示されている場合、アクティブであると見なされます。 これは、<Link>自体をクリックするか、<Section>まで手動でスクロールすることでトリガーできます。

これを証明するために、Chrome DevToolsを開いて、以下に示すように5番目の<Link>を調べました。 その<Link>をクリックするか、手動でページの一番下までスクロールすると、アクティブなクラスが実際に適用されていることに気付きました。

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

src / App.css 

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

ここで、ブラウザに戻って少しスクロールすると、適切な<Link>に下線が引かれているはずです。

ステップ4—追加機能の追加

コンテンツの最後のビットとして、このパッケージは、scrollToTop、scrollToBottomなどのように直接呼び出すことができるいくつかの関数も提供します。 だけでなく、あなたが処理できるさまざまなイベント。

これらの機能を参照すると、通常、ナビゲーションバーのアプリケーションロゴにより、ユーザーはホームページまたは現在のページの上部に移動します。

これらの提供された関数の1つを呼び出す方法の簡単な例として、nav-logoにクリックハンドラーを追加して、次のようにユーザーをページの先頭にスクロールして戻します。

src / Components / Navbar.js 

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

ブラウザに戻ると、ページを下にスクロールして、ナビゲーションバーのロゴをクリックすると、ページの上部に戻ることができます。

結論

スムーズなスクロールは、アプリケーションに多くの美的価値を追加できる機能の1つです。 react-scrollパッケージを使用すると、大きなオーバーヘッドなしでこの機能を活用できます。

このチュートリアルでは、アプリにスムーズなスクロールを追加し、さまざまな設定を試しました。 興味がある場合は、このパッケージが提供する他の機能やイベントを調べてみてください。

「https://www.finddevguides.com/index.php?title=Reactでスムーズなスクロールを実装する方法&oldid=102574」から取得
Powered by MediaWiki