質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • JavaScript

    16383questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    4009questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2063questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JSでスクロールの同期

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 743

-1an.vvks-

score 61

 Javascriptで複数要素のスクロールを同期させたい

  • js_ddExampleクラス同士,js_ddCharsクラス同士で,スクロールを同期させたい
  • https://teratail.com/questions/95230の続きです
  • 丸投げに見えますが,皆目見当もつかない...という感じなのでよろしくお願いします

今の段階で書けているコード

<!DOCTYPE html>

<html lang="ja">

    <head>
        <meta charset="utf-8">
        <meta name="author" content="lan.works">
        <meta name="description" content="what fonts i have?">
        <meta name="format-detection" content="telephone=no, address=no, email=no">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto">

        <style>
            body{
                margin: 0;
            }
            header{
                display: flex;
                position: sticky;
                top: 0;
                height: 3rem;
                padding: 5px 0;
                background: rgba(255,255,255,.8);
            }
            h1{
                font-size: 2rem;
                margin: 0 3rem;
            }
            h1+input{
                width: 50%;
                font-size: 1.5rem;
                height: 2.5rem;
            }
            #viewSwitcher{
                display: flex;
                list-style: none;
                margin: 0;
            }
            #viewSwitcher >li{
                padding: .5em;
                background: #eee;
                border-radius: .25em;
                margin: 0 .25rem;
            }

            dd{
                min-height: 7rem;
                max-height: 7rem;
                overflow-y: scroll;
                border: 1px solid #ddd;
            }
            .js_ddChars{
                display: none;
                background: #eee;
            }
            #anc_js_ddExample:target ~dl >.js_ddExample{
                display: block;
            }
            #anc_js_ddExample:target ~dl >.js_ddChars{
                display: none;
            }
            #anc_js_ddChars:target ~dl >.js_ddChars{
                display: block;
            }
            #anc_js_ddChars:target ~dl >.js_ddExample{
                display: none;
            }


            .fsX2{font-size: 2em;}

            /*Fonts-List*/
            .ff_Ferrum{font-family: Ferrum;}
            .ff_Roboto{font-family: Roboto;}

        </style>

        <title>fonts-list</title>
    </head>

    <body>
        <div id="anc_js_ddExample"></div>
        <div id="anc_js_ddChars"></div>

        <header>
            <h1 style="">Fonts List</h1>
            <input type="text" id="js_ddExampleInput" value="a">
            <ul id="viewSwitcher">
                <li><a href="#anc_js_ddExample">YourInput</a></li>
                <li><a href="#anc_js_ddChars">Characters</a></li>
            </ul>
        </header>

        <dl style="padding: 10px;">
            <dt>DEFAULT FONT of your browser</dt>
            <dd class="js_ddExample"></dd>
            <dd class="js_ddChars">
                <p>A B C Ć Č D Đ E F G H I J K L M N O P Q R S Š T U V W X Y Z Ž</p>
                <p>a b c č ć d đ e f g h i j k l m n o p q r s š t u v w x y z ž</p>
                <p>А Б В Г Ґ Д Ђ Е Ё Є Ж З Ѕ И І Ї Й Ј К Л Љ М Н Њ О П Р С Т Ћ У Ў Ф Х Ц Ч Џ Ш Щ Ъ Ы Ь Э Ю Я</p>
                <p>а б в г ґ д ђ е ё є ж з ѕ и і ї й ј к л љ м н њ о п р с т ћ у ў ф х ц ч џ ш щ ъ ы ь э ю я</p>
                <p>Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω</p>
                <p>α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω</p>
                <p>ά Ά έ Έ έ Ή ί ϊ ΐ Ί ό Ό ύ ΰ ϋ Ύ Ϋ Ώ Ă Â Ê Ô Ơ Ư ă â ê ô ơ ư</p>
                <p>1 2 3 4 5 6 7 8 9 0 ‘ ? ’ “ ! ” ( % ) [ # ] { @ } / &amp; &lt; - + ÷ × = &gt; ® © $ € £ ¥ ¢ : ; , . *</p>
            </dd>

            <dt class="ff_Ferrum fsX2">Ferrum</dt>
            <dd class="ff_Ferrum js_ddExample"></dd>
            <dd class="ff_Ferrum js_ddChars"></dd>

            <dt class="ff_Roboto">Roboto</dt>
            <dd class="ff_Roboto js_ddExample"></dd>
            <dd class="ff_Roboto js_ddChars"></dd>
        </dl>

        <script>
            /*headerにあるinputへの入力内容を他の要素に反映させる*/
            function reflect_js_ddExample(){
                for(var i = 0, len = document.getElementsByClassName('js_ddExample').length; i < len; i++){
                    document.getElementsByClassName('js_ddExample')[i].innerHTML = document.getElementById('js_ddExampleInput').value;
                };
            };
            setInterval( "reflect_js_ddExample()", 500);

            /*文字一覧の内容を他の要素にコピー*/
            var _js_ddChars= document.getElementsByClassName('js_ddChars');
            for(var i = 1, len = _js_ddChars.length; i < len; i++){
                _js_ddChars.item(i).innerHTML = _js_ddChars.item(0).innerHTML;
            };

            /*スクロールの同期(.js_ddExample同士,.js_ddChars同士のスクロールを同期させるコード)*/
        </script>

    </body>

</html>

現物

  • https://thimbleprojects.org/-lanwks-/329272/
  • ページ上部の入力は,下のボックスの内容に反映されます
  • YourInputをクリックすると,ユーザーの入力が,
    Charactersをクリックすると,文字の一覧が,下のボックスに表示されます
  • 右上のRemixと書かれたボタンを押すと,その場でコードが弄れます
    同期させたい部分の画像
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

以下のリンク先のコードが参考になるかと。

スクロールを連動させる

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

以下のようにしてはいかがでしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="author" content="lan.works">
    <meta name="description" content="what fonts i have?">
    <meta name="format-detection" content="telephone=no, address=no, email=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
    <style>
        body {
            margin: 0;
        }

        header {
            display: flex;
            position: sticky;
            top: 0;
            height: 3rem;
            padding: 5px 0;
            background: rgba(255, 255, 255, .8);
        }

        h1 {
            font-size: 2rem;
            margin: 0 3rem;
        }

        h1 + input {
            width: 50%;
            font-size: 1.5rem;
            height: 2.5rem;
        }

        #viewSwitcher {
            display: flex;
            list-style: none;
            margin: 0;
        }

        #viewSwitcher > li {
            padding: .5em;
            background: #eee;
            border-radius: .25em;
            margin: 0 .25rem;
        }

        dd {
            min-height: 7rem;
            max-height: 7rem;
            overflow-y: scroll;
            border: 1px solid #ddd;
        }

        .js_ddChars {
            display: none;
            background: #eee;
        }

        #anc_js_ddExample:target ~ dl > .js_ddExample {
            display: block;
        }

        #anc_js_ddExample:target ~ dl > .js_ddChars {
            display: none;
        }

        #anc_js_ddChars:target ~ dl > .js_ddChars {
            display: block;
        }

        #anc_js_ddChars:target ~ dl > .js_ddExample {
            display: none;
        }

        .fsX2 {
            font-size: 2em;
        }

        /*Fonts-List*/
        .ff_Ferrum {
            font-family: Ferrum;
        }

        .ff_Roboto {
            font-family: Roboto;
        }
    </style>
    <title>fonts-list</title>
</head>
<body>
<div id="anc_js_ddExample"></div>
<div id="anc_js_ddChars"></div>
<header>
    <h1 style="">Fonts List</h1>
    <input type="text" id="js_ddExampleInput" value="a">
    <ul id="viewSwitcher">
        <li><a href="#anc_js_ddExample">YourInput</a></li>
        <li><a href="#anc_js_ddChars">Characters</a></li>
    </ul>
</header>
<dl style="padding: 10px;">
    <dt>DEFAULT FONT of your browser</dt>
    <dd class="js_ddExample"></dd>
    <dd class="js_ddChars">
        <p>A B C Ć Č D Đ E F G H I J K L M N O P Q R S Š T U V W X Y Z Ž</p>
        <p>a b c č ć d đ e f g h i j k l m n o p q r s š t u v w x y z ž</p>
        <p>А Б В Г Ґ Д Ђ Е Ё Є Ж З Ѕ И І Ї Й Ј К Л Љ М Н Њ О П Р С Т Ћ У Ў Ф Х Ц Ч Џ Ш Щ Ъ Ы Ь Э Ю Я</p>
        <p>а б в г ґ д ђ е ё є ж з ѕ и і ї й ј к л љ м н њ о п р с т ћ у ў ф х ц ч џ ш щ ъ ы ь э ю я</p>
        <p>Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω</p>
        <p>α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω</p>
        <p>ά Ά έ Έ έ Ή ί ϊ ΐ Ί ό Ό ύ ΰ ϋ Ύ Ϋ Ώ Ă Â Ê Ô Ơ Ư ă â ê ô ơ ư</p>
        <p>1 2 3 4 5 6 7 8 9 0 ‘ ? ’ “ ! ” ( % ) [ # ] { @ } / &amp; &lt; - + ÷ × = &gt; ® © $ € £ ¥ ¢ : ; , . *</p>
    </dd>
    <dt class="ff_Ferrum fsX2">Ferrum</dt>
    <dd class="ff_Ferrum js_ddExample"></dd>
    <dd class="ff_Ferrum js_ddChars"></dd>
    <dt class="ff_Roboto">Roboto</dt>
    <dd class="ff_Roboto js_ddExample"></dd>
    <dd class="ff_Roboto js_ddChars"></dd>
</dl>
<script>
    function reflect_js_ddExample() {
        var ddExample = document.getElementsByClassName("js_ddExample");
        for (var i = 0, len = ddExample.length; i < len; i++) {
            ddExample[i].textContent = document.getElementById("js_ddExampleInput").value;
            ddExample[i].scrollLeft = ddExample[0].scrollLeft;
            ddExample[i].scrollTop = ddExample[0].scrollTop;
        }
    }

    var elements = [document, document.getElementById("js_ddExampleInput"), document.getElementsByClassName("js_ddExample")[0]],
        events = ["DOMContentLoaded", "input", "scroll"];
    for (var j = 0; j < elements.length; j++) {
        elements[j].addEventListener(events[j], reflect_js_ddExample, false);
    }

    var _js_ddChars = document.getElementsByClassName("js_ddChars");
    for (var i = 1, len = _js_ddChars.length; i < len; i++) {
        _js_ddChars.item(i).innerHTML = _js_ddChars.item(0).innerHTML;
    }
</script>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16383questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    4009questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2063questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。