React の要素までスクロールする

1. React の Element.scrollIntoView() メソッドを使用して要素までスクロールする
2. React 参照のある要素までスクロールする（参照）

現代のインターネットは、あらゆる種類のコンテンツのテキストで満たされています。多くの場合、探しているものを見つけるためにスクロールする必要があります。ただし、エンドレスフィードをスクロールすると、イライラしたり、UX の習慣が悪くなったりする可能性があります。1つの解決策は、目次を作成することです。

React フレームワークは、同じ結果を達成するためのより良い方法を提供します。自動的に、またはボタンをクリックして、要素を参照してスクロールすることができます。ユーザーが探しているものを検出して即座に表示することで、アプリや Web サイトの使いやすさを向上させることができます。

この機能を実装する方法は複数あります。使用しているコンポーネントのタイプ（機能とクラス）に応じて、適切なコンポーネントを選択する必要があります。

それでも、すべての実装は 2つのビットで構成されます。HTML 要素インターフェイスによって提供される Element.scrollIntoView() メソッドと、useRef() フック（機能コンポーネント用）のいずれかを使用して作成できる React refs（参照の略）です。または createRef() メソッド（クラスコンポーネントの場合）。

React の Element.scrollIntoView() メソッドを使用して要素までスクロールする

前述のように、このメソッドは、スクロールが上下に移動して、呼び出された要素を表示するようにします。

element.scrollIntoView() は 1つの引数のみを受け入れることができます。これは、alignToTop ブール値または options オブジェクトのいずれかです。

alignToTop

true ブール値を渡すと、要素はスクロール可能な親要素の上部に配置されます。

false 値を渡すと、要素がスクロール可能な親要素の下部に配置されます。

Options

この引数はオブジェクトとして表されますが、メソッドのデフォルト設定をカスタマイズおよび変更できます。

オブジェクトには、3つのオプションのプロパティを含めることができます。それらがない場合、設定はデフォルトに戻ります。

1. behavior プロパティを使用すると、遷移をカスタマイズできます。デフォルトでは、auto に設定されています。見栄えの良いアニメーションである smooth に設定できます。
2. block プロパティを使用すると、要素を垂直に配置できます。start、center、end、または nearest の値を取ることができます。start がデフォルト設定です。
3. inline プロパティを使用すると、要素を水平に配置できます start、center、end、または nearest の値を取ることができます。nearest がデフォルト設定です。

ブラウザのサポート

element.scrollIntoView() メソッド自体は、すべての主要なブラウザーでサポートされています。ただし、一部の古いブラウザは、渡された options 引数を無視します。caniuse.comによると、世界中のユーザーの約 76％だけが、この議論をサポートするブラウザーを持っています。ウェブサイトはそれを実験的な特徴として説明しています。

React 参照のある要素までスクロールする（参照）

React の Ref にはさまざまなアプリケーションがあります。最も一般的な使用法の 1つは、DOM 内の要素を参照することです。要素を参照することで、アクセス要素のインターフェースも取得できます。これは、スクロール先の要素をキャプチャするために不可欠です。

要素は、その ref 属性を参照インスタンスに設定することで参照できます。コード例は次のとおりです。

const testDivRef = useRef(null);
<div className = 'testDiv' ref = {testDivRef}>< /div>

ここで、<div> 要素はスクロールして表示したい要素です。他の HTML 要素でも react 参照を使用できます。

<h1 ref={testDivRef}>Title</h1>

参照オブジェクトの current プロパティは、実際の要素を保持します。testDivRef.current をコンソールにログオンすると、次のようになります。

以下は完全な解決策です。

機能コンポーネントの場合：

function TestComponent() {
  const testRef = useRef(null);
  const scrollToElement = () => testRef.current.scrollIntoView();
  // Once the scrollToElement function is run, the scroll will show the element
  return (
    <>
      <div ref={testRef}>Element you want to view</div>
      <button onClick={scrollToElement}>Trigger the scroll</button>
    </>
  );
}

クラスコンポーネントの場合：

class TestComponent extends Component {
  constructor(props) {
    super(props);
    this.testRef = React.createRef();
  }
  scrollToElement = () => this.testRef.current.scrollIntoView();
  // Once the scrollToElement method is run, the scroll will show the element
  render() {
    return <div ref = {this.testRef}>Element you want in view < /div>;
  }
}

追加のヒント：

current プロパティは、コンポーネントがマウントされた後にのみアクセス可能になります。

useEffect() コールバックまたは同等のもの（クラスコンポーネントの componentDidMount() ライフサイクルメソッド）でプロパティを参照することをお勧めします。

useEffect(() => console.log(testRef.current), [])

続行する前に、ref.current が true に等しいかどうかを条件付きで確認することもできます。

if (testRef.current) {
  testRef.current.scrollIntoView()
}

ボタンをクリックすると、スクロールがトリガーされるように設定できます。このようにして、表示する必要のあるボタンとコンポーネントがマウントされた後、スクロールが確実に実行されるようにすることができます。

<button onClick={scrollToElement}>Trigger the scroll</button>

バンドルソリューション

react-scroll-to-component と呼ばれる NPM パッケージは、この機能をバンドルソリューションとして提供するために特別に構築されました。npm や yarn で簡単にインストールできます。

このパッケージの詳細については、ドキュメントをお読みください。