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 ‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & < - + ÷ × = > ® © $ € £ ¥ ¢ : ; , . *</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>
###現物
- https://thimbleprojects.org/-lanwks-/329272/
- ページ上部の入力は,下のボックスの内容に反映されます
- YourInputをクリックすると,ユーザーの入力が,
Charactersをクリックすると,文字の一覧が,下のボックスに表示されます
- 右上のRemixと書かれたボタンを押すと,その場でコードが弄れます
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。