Open1

iframeのスクロール検知

かるでねかるでね

Next.jsでIframe内のスクロールを検知する

iframeにjs追加

今回は一番下までスクロールされたかを検知するようにします。
任意のJSファイルを作成し、以下のコードを貼り付けてください。
今回はscroll.jsというファイルを作成しました。

window.addEventListener('scroll', () => {
  const origin = window.location.origin;
  const isScrolledToBottom = window.scrollY + window.innerHeight >= document.body.scrollHeight;
  window.parent.postMessage({ isScrolledToBottom }, origin);
});

以下の部分でオリジンを取得しています。

const origin = window.location.origin;

以下の部分で一番下までスクロールしたかを検知しています。
isScrolledToBottomにはbool値が格納されます。

const isScrolledToBottom = window.scrollY + window.innerHeight >= document.body.scrollHeight;

以下の部分でiframeを読み込んでいる親ページ（オリジン）にメッセージを投げています。

window.parent.postMessage({ isScrolledToBottom }, origin);

作成したJSファイルをiframeのHTML内に含めてください。

...
    </div>

    <script src="../js/scroll.js"></script>
  </body>
...

next.jsのiframeを読み込んでいるファイルに以下を追加してください。

Next.jsに追加

...
// 一番下までスクロールされたかを管理
const [isScrolledToBottom, setIsScrolledToBottom] = useState<boolean>(false);

// scroll.jsでの判定結果を格納
  const handleScrollEvent = (event: any) => {
    if (event.data.isScrolledToBottom !== undefined) {
      setIsScrolledToBottom(event.data.isScrolledToBottom);
    }
  };

  useLayoutEffect(() => {
    // iframeから飛ばされたイベントを取得
    window.addEventListener('message', handleScrollEvent);
    return () => {
      window.removeEventListener('message', handleScrollEvent);
    };
  }, []);
...