📜

目次スクロール実装に便利なReact Scroll

2024/02/29に公開

目次をクリックしたときに、その目次に関連するアイテムのところまでスクロールする機能を
実装するとき便利なReact Scrollを触ってみました。

おそらく、地道に実装すると結構大変になるかと思います💦

この記事では、便利なReact Scrollを紹介します。

基本的な使い方

<Element name="アイテム名">タグでスクロール表示したいアイテムを囲みます。
あとは、scroller.scrollTo("アイテム名")関数を実行すれば選択したアイテム名の部分までスクロールがされます😊

スタイルにoverflow: autoを適用しているタグにidをつけます。
スクロールの関数のオプションにidを設定します。
scroller.scrollTo("アイテム名", { containerId: 設定したid })

スクロールのアニメーションの設定することができます。
アニメーションにかかる時間やアニメーションの方式などを設定できます✨
こちらに設定のオプションについて書いてあります。

「ワークスタイルの未来を切り拓く」を理念に掲げ、リアルとデジタルの2つの働く場に向けた事業展開に留まらず、自社が率先して新しいワークスタイルに挑戦し、発信を行うことでワークスタイルの未来を切り拓いていきます。