web

react-scrollで画面内スクロールを実装する

公開日:2022年3月6日
最終更新日:2022年3月6日
目次
  • ライブラリ追加
  • 基本的な使い方
  • オプション
  • アクティブなidを取得する

スター数多いし、オプションがあって便利そうなので使ってみました。
このブログの目次スクロールで使ってるので、押してみてください。

https://github.com/fisshy/react-scroll

ライブラリ追加

TypeScriptを使ってる場合は型ファイルも追加します。

yarn add react-scroll @types/react-scroll


基本的な使い方

importしてスクロール先にid、Linkにtoで指定するだけです。
smoothtrue にすることで、スクロールするようになります。

import { Link } from 'react-scroll'

 <section id="section1">セクション1</section>

<Link to="section1" smooth>セクション1へ</Link>


オプション

GitHubに書かれてますが、よく使うものをピックアップしました。
https://github.com/fisshy/react-scroll#propsoptions

duration でスクロールの速度を指定できます。デフォルト 500 です。
offset はスクロール位置を調整できます。-100 にするとターゲットの上に100px余裕ができます。

<Scroll to="section1" smooth={true} duration={400} offset={-100} onSetActive={}>
    セクション1
</Scroll>


アクティブなidを取得する

以下のオプションで現在の表示位置のidを取得できます。
メニューをクリックでスクロールしたり、ブラウザのスクロールをすると、consoleに現在表示されてるidが表示されるはずです。
以下のコードはconsoleに出してるだけですが、setStateと組み合わせると現在位置のメニューをactive状態のスタイルにすることができます。

<Link
    to={item.id}
    smooth
    duration={400}
    onSetActive={(to) => console.log(to)}  // 追加
    spy={true}  // 追加
>
    {item.text}
</Link>


About the author

大阪でフロントエンドエンジニアをしています。写真を撮るのが趣味です。よかったら500pxに載せてる写真も見てください。
web上に公開しているので、正確さに可能な限り努力してますが、個人の備忘録程度に書いてるので、ご自身の判断で参考程度に読んでください。
間違いやご意見があれば、コンタクトやSNSに気軽にご連絡ください。

Read next

Category

  • web
  • 雑記