🏄‍♂️

React でスクロール連動エフェクトするなら react-intersection-observer が良き

2022/10/09に公開

CSS

背景

React（JSフレームワーク）と TypeScript と Emotion（CSS in JS）を導入した環境で、
特定の高さまでスクロールしてきた時にテキストにマーカーが引かれるやつ を実装する機会がありました。

当初は、JavaScriptのscrollイベント や window.pageYOffset などを使って一度実装したのですが、この手法だと スクロールのたびに関数が呼び出される ため、パフォーマンスに影響を及ぼしてしまう ようです。

今回はせっかくのReact環境ということで、パフォーマンスも良くて導入しやすい
react-intersection-observer（名前がカッコ良い）についてご紹介します。

まず、Intersection Observer とは

Intersection（要素間の交差） を Observe（監視） するAPIのことです。
指定したDOM要素の交差点を監視することができます。
「Intersection Observer」の詳細はこちら

ブラウザサポートも拡充しており、今後標準となる技術のようです。
Can I Use - 「Intersection Observer」の対応ブラウザ状況はこちら

何はともあれ実装

ライブラリ react-intersection-observer をインストールします。

$ yarn add react-intersection-observer

コンポーネントに使用していきます。

/** @jsx jsx */
import { FC } from "react";
import { jsx } from "@emotion/core";
import { styles } from "./Styled";

import { useInView } from 'react-intersection-observer';

export const index: FC = () => {
  // Hooksを使って簡単に書くことができます。
  // refで要素を指定して、inViewを使って要素がViewに入ったかどうかを判定します。
  // Optionについては、rootMarginを設定。要素が100pxより上に入った段階でinViewを取得できます。
  const [ref, inView] = useInView({
    rootMargin: '-100px 0px',
  });

  return (
    // スクロールして要素が表示されると同時に styles.show が付与される
    <p ref={ref} css={[styles.yellow, inView && styles.show]}>
      テキストテキスト
    </p>
  );
};

Styled.ts（styleについては、Styled.ts に切り出す手法で実装しています。）

import { css } from "@emotion/core";

export const styles = {
  // マーカー箇所のstyle
  yellow: css`
    width: 200px;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transition: 2s;
    background: -webkit-linear-gradient(
      left,
      rgb(255, 250, 153) 50%,
      transparent 50%
    );
    background-repeat: no-repeat;
    background-size: 200% 0.8em;
    background-position: 100% 0.5em;
  `,

  // スクロールして要素が表示されると同時に付与されるstyle
  show: css`
    opacity: 1;
    background-position: 0% 0.5em;
    animation: SlideIn 3s ease-out both;
    transform: translateY(-10px);
  `,
};

ブラウザをスクロールして確認すると、
テキスト箇所が表示される高さになった瞬間に、アニメーションが発火してくれました！
（動き的には、ふわっと下から表示 + マーカーが左から引かれる）

利用に便利なシチュエーション

特定の高さまでスクロールしてきた時にテキストにマーカーが引かれるやつ
画像の遅延ロード
YouTubeの自動再生
コンテンツの追加読み込み
などなど

まとめ

いかがだったでしょうか？
今回は React環境で簡単にIntersection Observer APIを使用することができる、
react-intersection-observer をご紹介しました。
とても簡単で便利ですので、ぜひ一度使ってみてください。

参考

JSでのスクロール連動エフェクトにはIntersection Observerが便利
 使ってみよう！Intersection Observer！

背景

まず、Intersection Observer とは

何はともあれ実装

利用に便利なシチュエーション

まとめ

参考

Discussion