iframeでスクロール量やスクロールイベントを取得したい (React + TypeScript)

前提

iframeでPDFファイルを読み込み、iframe内でのスクロールをトリガーにボタンを表示 / 非表示する制御をしたいです。

実現したいこと

• React + TypeScriptで、iframeのスクロールイベントを検知。

• 挙動としては以下です。
  例) iframe内で一番下までスクロールしたらボタンを表示
  例) iframe内で下方向にスクロールしたらボタンを表示、上方向にスクロールしたら非表示

発生している問題・エラーメッセージ

(追記します)

(追記します) エラーメッセージ

該当のソースコード

(追記します)

React

(追記します) ソースコード

試したこと・調べたこと

• (iframeのスクロールイベント処理をいったん諦めて)
  iframeの高さを20000pxなど全ページが収まるサイズにしてスクロールバーを出さないようにして、windowのスクロールイベントでボタンの表示 / 非表示を制御しようとした。
  →しかしPDFの描画がカクついたので廃案に。

• 調査の結果「クロスサイトスクリプティング」によりドメインが異なればイベント取得などはできないと知った
  →ローカル環境 (localhost) なので、本件とは関係なさそう?

補足情報（FW/ツールのバージョンなど）

• React (v16.14.0)
• TypeScript (v4.7.4)