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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

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

HTML5

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

JavaScript

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

Q&A

2回答

5120閲覧

JSでスクロールの同期

-1an.vvks-

総合スコア71

CSS3

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

HTML5

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

JavaScript

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

0グッド

0クリップ

投稿2017/10/07 17:38

編集2022/01/12 10:55

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

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

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

html

1<!DOCTYPE html> 2 3<html lang="ja"> 4 5 <head> 6 <meta charset="utf-8"> 7 <meta name="author" content="lan.works"> 8 <meta name="description" content="what fonts i have?"> 9 <meta name="format-detection" content="telephone=no, address=no, email=no"> 10 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 11 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 12 13 <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto"> 14 15 <style> 16 body{ 17 margin: 0; 18 } 19 header{ 20 display: flex; 21 position: sticky; 22 top: 0; 23 height: 3rem; 24 padding: 5px 0; 25 background: rgba(255,255,255,.8); 26 } 27 h1{ 28 font-size: 2rem; 29 margin: 0 3rem; 30 } 31 h1+input{ 32 width: 50%; 33 font-size: 1.5rem; 34 height: 2.5rem; 35 } 36 #viewSwitcher{ 37 display: flex; 38 list-style: none; 39 margin: 0; 40 } 41 #viewSwitcher >li{ 42 padding: .5em; 43 background: #eee; 44 border-radius: .25em; 45 margin: 0 .25rem; 46 } 47 48 dd{ 49 min-height: 7rem; 50 max-height: 7rem; 51 overflow-y: scroll; 52 border: 1px solid #ddd; 53 } 54 .js_ddChars{ 55 display: none; 56 background: #eee; 57 } 58 #anc_js_ddExample:target ~dl >.js_ddExample{ 59 display: block; 60 } 61 #anc_js_ddExample:target ~dl >.js_ddChars{ 62 display: none; 63 } 64 #anc_js_ddChars:target ~dl >.js_ddChars{ 65 display: block; 66 } 67 #anc_js_ddChars:target ~dl >.js_ddExample{ 68 display: none; 69 } 70 71 72 .fsX2{font-size: 2em;} 73 74 /*Fonts-List*/ 75 .ff_Ferrum{font-family: Ferrum;} 76 .ff_Roboto{font-family: Roboto;} 77 78 </style> 79 80 <title>fonts-list</title> 81 </head> 82 83 <body> 84 <div id="anc_js_ddExample"></div> 85 <div id="anc_js_ddChars"></div> 86 87 <header> 88 <h1 style="">Fonts List</h1> 89 <input type="text" id="js_ddExampleInput" value="a"> 90 <ul id="viewSwitcher"> 91 <li><a href="#anc_js_ddExample">YourInput</a></li> 92 <li><a href="#anc_js_ddChars">Characters</a></li> 93 </ul> 94 </header> 95 96 <dl style="padding: 10px;"> 97 <dt>DEFAULT FONT of your browser</dt> 98 <dd class="js_ddExample"></dd> 99 <dd class="js_ddChars"> 100 <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> 101 <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> 102 <p>А Б В Г Ґ Д Ђ Е Ё Є Ж З Ѕ И І Ї Й Ј К Л Љ М Н Њ О П Р С Т Ћ У Ў Ф Х Ц Ч Џ Ш Щ Ъ Ы Ь Э Ю Я</p> 103 <p>а б в г ґ д ђ е ё є ж з ѕ и і ї й ј к л љ м н њ о п р с т ћ у ў ф х ц ч џ ш щ ъ ы ь э ю я</p> 104 <p>Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω</p> 105 <p>α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω</p> 106 <p>ά Ά έ Έ έ Ή ί ϊ ΐ Ί ό Ό ύ ΰ ϋ Ύ Ϋ Ώ Ă Â Ê Ô Ơ Ư ă â ê ô ơ ư</p> 107 <p>1 2 3 4 5 6 7 8 9 0 ‘ ? ’ “ ! ” ( % ) [ # ] { @ } / &amp; &lt; - + ÷ × = &gt; ® © $ € £ ¥ ¢ : ; , . *</p> 108 </dd> 109 110 <dt class="ff_Ferrum fsX2">Ferrum</dt> 111 <dd class="ff_Ferrum js_ddExample"></dd> 112 <dd class="ff_Ferrum js_ddChars"></dd> 113 114 <dt class="ff_Roboto">Roboto</dt> 115 <dd class="ff_Roboto js_ddExample"></dd> 116 <dd class="ff_Roboto js_ddChars"></dd> 117 </dl> 118 119 <script> 120 /*headerにあるinputへの入力内容を他の要素に反映させる*/ 121 function reflect_js_ddExample(){ 122 for(var i = 0, len = document.getElementsByClassName('js_ddExample').length; i < len; i++){ 123 document.getElementsByClassName('js_ddExample')[i].innerHTML = document.getElementById('js_ddExampleInput').value; 124 }; 125 }; 126 setInterval( "reflect_js_ddExample()", 500); 127 128 /*文字一覧の内容を他の要素にコピー*/ 129 var _js_ddChars= document.getElementsByClassName('js_ddChars'); 130 for(var i = 1, len = _js_ddChars.length; i < len; i++){ 131 _js_ddChars.item(i).innerHTML = _js_ddChars.item(0).innerHTML; 132 }; 133 134 /*スクロールの同期(.js_ddExample同士,.js_ddChars同士のスクロールを同期させるコード)*/ 135 </script> 136 137 </body> 138 139</html>

###現物

Charactersをクリックすると,文字の一覧が,下のボックスに表示されます

  • 右上のRemixと書かれたボタンを押すと,その場でコードが弄れます

同期させたい部分の画像

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="author" content="lan.works"> 6 <meta name="description" content="what fonts i have?"> 7 <meta name="format-detection" content="telephone=no, address=no, email=no"> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 10 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> 11 <style> 12 body { 13 margin: 0; 14 } 15 16 header { 17 display: flex; 18 position: sticky; 19 top: 0; 20 height: 3rem; 21 padding: 5px 0; 22 background: rgba(255, 255, 255, .8); 23 } 24 25 h1 { 26 font-size: 2rem; 27 margin: 0 3rem; 28 } 29 30 h1 + input { 31 width: 50%; 32 font-size: 1.5rem; 33 height: 2.5rem; 34 } 35 36 #viewSwitcher { 37 display: flex; 38 list-style: none; 39 margin: 0; 40 } 41 42 #viewSwitcher > li { 43 padding: .5em; 44 background: #eee; 45 border-radius: .25em; 46 margin: 0 .25rem; 47 } 48 49 dd { 50 min-height: 7rem; 51 max-height: 7rem; 52 overflow-y: scroll; 53 border: 1px solid #ddd; 54 } 55 56 .js_ddChars { 57 display: none; 58 background: #eee; 59 } 60 61 #anc_js_ddExample:target ~ dl > .js_ddExample { 62 display: block; 63 } 64 65 #anc_js_ddExample:target ~ dl > .js_ddChars { 66 display: none; 67 } 68 69 #anc_js_ddChars:target ~ dl > .js_ddChars { 70 display: block; 71 } 72 73 #anc_js_ddChars:target ~ dl > .js_ddExample { 74 display: none; 75 } 76 77 .fsX2 { 78 font-size: 2em; 79 } 80 81 /*Fonts-List*/ 82 .ff_Ferrum { 83 font-family: Ferrum; 84 } 85 86 .ff_Roboto { 87 font-family: Roboto; 88 } 89 </style> 90 <title>fonts-list</title> 91</head> 92<body> 93<div id="anc_js_ddExample"></div> 94<div id="anc_js_ddChars"></div> 95<header> 96 <h1 style="">Fonts List</h1> 97 <input type="text" id="js_ddExampleInput" value="a"> 98 <ul id="viewSwitcher"> 99 <li><a href="#anc_js_ddExample">YourInput</a></li> 100 <li><a href="#anc_js_ddChars">Characters</a></li> 101 </ul> 102</header> 103<dl style="padding: 10px;"> 104 <dt>DEFAULT FONT of your browser</dt> 105 <dd class="js_ddExample"></dd> 106 <dd class="js_ddChars"> 107 <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> 108 <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> 109 <p>А Б В Г Ґ Д Ђ Е Ё Є Ж З Ѕ И І Ї Й Ј К Л Љ М Н Њ О П Р С Т Ћ У Ў Ф Х Ц Ч Џ Ш Щ Ъ Ы Ь Э Ю Я</p> 110 <p>а б в г ґ д ђ е ё є ж з ѕ и і ї й ј к л љ м н њ о п р с т ћ у ў ф х ц ч џ ш щ ъ ы ь э ю я</p> 111 <p>Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω</p> 112 <p>α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω</p> 113 <p>ά Ά έ Έ έ Ή ί ϊ ΐ Ί ό Ό ύ ΰ ϋ Ύ Ϋ Ώ Ă Â Ê Ô Ơ Ư ă â ê ô ơ ư</p> 114 <p>1 2 3 4 5 6 7 8 9 0 ‘ ? ’ “ ! ” ( % ) [ # ] { @ } / &amp; &lt; - + ÷ × = &gt; ® © $ € £ ¥ ¢ : ; , . *</p> 115 </dd> 116 <dt class="ff_Ferrum fsX2">Ferrum</dt> 117 <dd class="ff_Ferrum js_ddExample"></dd> 118 <dd class="ff_Ferrum js_ddChars"></dd> 119 <dt class="ff_Roboto">Roboto</dt> 120 <dd class="ff_Roboto js_ddExample"></dd> 121 <dd class="ff_Roboto js_ddChars"></dd> 122</dl> 123<script> 124 function reflect_js_ddExample() { 125 var ddExample = document.getElementsByClassName("js_ddExample"); 126 for (var i = 0, len = ddExample.length; i < len; i++) { 127 ddExample[i].textContent = document.getElementById("js_ddExampleInput").value; 128 ddExample[i].scrollLeft = ddExample[0].scrollLeft; 129 ddExample[i].scrollTop = ddExample[0].scrollTop; 130 } 131 } 132 133 var elements = [document, document.getElementById("js_ddExampleInput"), document.getElementsByClassName("js_ddExample")[0]], 134 events = ["DOMContentLoaded", "input", "scroll"]; 135 for (var j = 0; j < elements.length; j++) { 136 elements[j].addEventListener(events[j], reflect_js_ddExample, false); 137 } 138 139 var _js_ddChars = document.getElementsByClassName("js_ddChars"); 140 for (var i = 1, len = _js_ddChars.length; i < len; i++) { 141 _js_ddChars.item(i).innerHTML = _js_ddChars.item(0).innerHTML; 142 } 143</script> 144</body> 145</html>

投稿2017/10/07 19:50

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

スクロールを連動させる

投稿2017/10/07 18:09

kentei_syunrai

総合スコア946

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問