2つのiframeを同期スクロールさせる

JavaScript iframe

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <iframe id="iframeTxt1" src="longlong.txt"></iframe>
        <iframe id="iframeTxt2" src="longlong.txt"></iframe>
    <script>
        var iframe1 = document.getElementById("iframeTxt1");
        var iframe2 = document.getElementById("iframeTxt2");

        function scroll1() {
            iframe2.contentWindow.scrollTo(0,iframe1.contentWindow.pageYOffset);
        }
        function scroll2() {
            iframe1.contentWindow.scrollTo(0,iframe2.contentWindow.pageYOffset);
        }

        document.addEventListener('DOMContentLoaded', function() {
                iframe1.addEventListener('load', (function(element) {
                        return function() {
                                element.contentWindow.addEventListener('scroll', scroll1);
                        };
                })(iframe1, false));
                iframe2.addEventListener('load', (function(element) {
                        return function() {
                                element.contentWindow.addEventListener('scroll', scroll2);
                        };
                })(iframe2, false));
        }, false);
    </script>
    </body>
</html>

参考
https://qiita.com/sinsia/items/54865025821cb9203cfc

ユーザー登録して、Qiitaをもっと便利に使ってみませんか。

あなたにマッチした記事をお届けします
ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
便利な情報をあとで効率的に読み返せます
気に入った記事を「ストック」することで、あとからすぐに検索できます

より詳しく

@nkmrtkhd

@he84526

2021-11-30 01:21

リンクをコピー

このコメントを報告

こんな方法はどうでしょう。

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <iframe class='syncGroup1' src="longlong.txt"></iframe>
    <iframe class='syncGroup1' src="longlong.txt"></iframe>
    <iframe class='syncGroup2' src="longlong.txt"></iframe>
    <iframe class='syncGroup2' src="longlong.txt"></iframe>
    <script>
      window.addEventListener('DOMContentLoaded', () => {
        syncScroll(document.querySelectorAll('iframe.syncGroup1'));
        syncScroll(document.querySelectorAll('iframe.syncGroup2'));
      });

      const syncScroll = iFrames => {
        if(iFrames.length === 2) iFrames.forEach((e, i) => {
          e.contentWindow.addEventListener('scroll', ev => {
            iFrames[1 - i].contentWindow.scrollTo(0, e.contentWindow.pageYOffset);
          });
        });
      };
    </script>
  </body>
</html>

あなたもコメントしてみませんか :)

ユーザー登録

すでにアカウントを持っている方はログイン

記事投稿イベント開催中

マイクロソフト認定資格を取得する際の学習方法や経験談、おすすめ学習リソースなどを紹介しよう！

2021/11/11~2021/12/10

すべて見る

記事の改善

編集リクエストを送る

記事の情報

編集履歴編集リクエスト一覧 LGTMしたユーザー一覧 Markdown で本文を見る

問題がある記事を報告する