Reactでスムーズなスクロールを実装する方法
序章
スムーズスクロールは、ボタンをクリックして同じページの別の部分に即座に移動する代わりに、ユーザーがスクロールアニメーションを介してそこに移動する場合です。 これは、見た目の美しさを変えるサイトの微妙なUI機能の1つです。
この記事では、npmで react-scroll パッケージを使用して、スムーズなスクロールを実装します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- 有効な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";
リンクコンポーネントを追加します。 The <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.js を含むファイル <Navbar> と nav-items 5つの異なるに対応 <Section>s。
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>
);
}
}
次に、開いた場合 App.js のファイル src ディレクトリ、あなたはどこに表示されます <Navbar> 5つの実際の一緒に含まれています <Section>s」
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 ファイルをバックアップして追加します import 2つの名前付きインポートの場合、 Link と animateScroll.
import { Link, animateScroll as scroll } from "react-scroll";
エイリアスしたことに注意してください animatedScroll に scroll 使いやすさのために。
すべてのインポートが定義されたら、これで更新できます nav-items を使用するには <Link> 成分。 このコンポーネントはいくつかのプロパティを取ります。 それらすべてについては、ドキュメントページで読むことができます。
今のところ、特に注意してください activeClass, to, spy, smooth, offset、 と duration.
activeClass-要素に到達したときに適用されるクラス。to-スクロール先のターゲット。spy– 作るLink選択されたときscrollターゲットの位置にあります。smooth-スクロールをアニメーション化します。offset-追加のピクセルをスクロールします（パディングなど）。duration-スクロールアニメーションの時間。 これは、数値または関数にすることができます。
The to プロパティは、どの要素にスクロールするかをコンポーネントに指示するため、最も重要な部分です。 この場合、これはあなたのそれぞれになります <Section>s。
とともに offset プロパティでは、それぞれに到達するために実行するスクロールの追加量を定義できます <Section>.
それぞれに使用するプロパティの例を次に示します <Link> 成分。 それらの間の唯一の違いは to それぞれが異なるを指しているため、プロパティ <Section>:
<Link
activeClass="active"
to="section1"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
それぞれを更新する必要があります nav-items によると。 これらを追加すると、ブラウザに戻って（アプリはすでに自動的に再起動されているはずです）、スムーズなスクロールが動作していることを確認できます。
ステップ3—アクティブリンクのスタイリング
The activeClass プロパティを使用すると、に適用するクラスを定義できます。 <Link> そのときのコンポーネント to 要素がアクティブです。 A <Link> その場合はアクティブと見なされます to 要素はページの上部近くに表示されます。 これは、をクリックすることでトリガーできます <Link> それ自体または下にスクロールして <Section> 手動で。
これを証明するために、私はChrome DevToolsを開いて、5番目を調べました <Link> 以下に示すように。 それをクリックすると <Link> または手動でページの一番下までスクロールすると、アクティブなクラスが実際に適用されていることに気付きました。
これを利用するには、アクティブクラスを作成し、リンクにアンダースコアを追加します。 このCSSのビットをに追加できます App.css のファイル src ディレクトリ：
.nav-item > .active {
border-bottom: 1px solid #333;
}
ここで、ブラウザに戻って少しスクロールすると、適切なものが表示されるはずです。 <Link> 下線が引かれています。
ステップ4—追加機能の追加
コンテンツの最後のビットとして、このパッケージは、次のように直接呼び出すことができるいくつかの関数も提供します scrollToTop, scrollToBottom、など。 だけでなく、あなたが処理できるさまざまなイベント。
これらの機能を参照すると、通常、ナビゲーションバーのアプリケーションロゴにより、ユーザーはホームページまたは現在のページの上部に移動します。
これらの提供された関数の1つを呼び出す方法の簡単な例として、クリックハンドラーをに追加しました。 nav-logo 次のように、ユーザーをページの先頭にスクロールして戻します。
scrollToTop = () => {
scroll.scrollToTop();
};
ブラウザに戻ると、ページを下にスクロールして、ナビゲーションバーのロゴをクリックすると、ページの上部に戻ることができます。
結論
スムーズなスクロールは、アプリケーションに多くの美的価値を追加できる機能の1つです。 The react-scroll パッケージを使用すると、大きなオーバーヘッドなしでこの機能を活用できます。
このチュートリアルでは、アプリにスムーズなスクロールを追加し、さまざまな設定を試しました。 興味がある場合は、このパッケージが提供する他の機能やイベントを調べてみてください。
