Q&A
Javaxcriptとは？スペルミスはプログラミングにおいて致命傷となりうる部分なのでお気をつけください。また、コードは画面キャプチャではなく質問本文に直接貼り付けマークダウンのコード機能を使ってください。回答者が再現確認や調整を行うことも多いため、画像ではコードの読み取りが難しくなります。
前提・実現したいこと
Web版のDiscordより、メンバー表示部分をJavaxcriptでスクロールさせたいと思っております。
要素を確認するとdiv class内に収まっておりますが、どのようにするとスクロールできるでしょうか。
ネットでスクロールを調べてwindow.scrollで可能程度しか認識できておらず
こちらでは出来ず困っております。
何卒ご教授いただけませんでしょうか。
■Discord該当箇所の一部ソース(bodyタグ内)
※以下箇所をスクロールしたいと思います
<div class="membersWrap-2h-GB4"> <div class="scrollerWrap-2lJEkd scrollerThemed-2oenus themeGhostHairline-DBD-2d scrollerFade-1Ijw5y">Html
1<div class="membersWrap-2h-GB4"> 2<div class="scrollerWrap-2lJEkd scrollerThemed-2oenus themeGhostHairline-DBD-2d scrollerFade-1Ijw5y"> 3<div class="scroller-2FKFPG members-1998pB"> 4<div style="width: 100%; height: 0px; visibility: hidden;"> 5</div> 6<div class="membersGroup-v9BXpm">BOT—4 7</div> 8<div class="memberOnline-1CIh-0 member-3W1lQa"> 9<div class="content-OzHfo4"> 10<span class="avatarWrapper-3B0ndJ"> 11<div class="wrapper-2F3Zv8 small-5Os1Bb"> 12<div class="image-33JSyf small-5Os1Bb mask-3OgeRz " style="background-image: url("https://cdn.discordapp.com/avatars/441117179405008897/d56b172140207f5e547474ea8ea13c7e.png?size=128");"> 13</div> 14<div class="online-2S838R status-oxiHuE small-5Os1Bb statusStatic-3QpK4G status-2s6iDp"> 15</div> 16</div> 17</span> 18<div class="memberInner-2CPc3V"> 19<div class="nameTag-3p0yK- nameTag-m8r81H" style="color: rgb(31, 139, 76);"> 20<span class="usernameOnline-3jr_0Y username-1cB_5E">CCWallet 21</span> 22<span class="botTagRegular-2HEhHi botTag-2WPJ74 bot-2Fta1w">BOT 23</span> 24</div> 25</div> 26</div> 27</div> 28<div class="memberOnline-1CIh-0 member-3W1lQa"> 29<div class="content-OzHfo4"> 30<span class="avatarWrapper-3B0ndJ"> 31<div class="wrapper-2F3Zv8 small-5Os1Bb"> 32<div class="image-33JSyf small-5Os1Bb mask-3OgeRz " style="background-image: url("https://cdn.discordapp.com/avatars/415343767789240340/af73c6e9a36f775cee83f33a6be3a480.png?size=128");"> 33</div> 34<div class="online-2S838R status-oxiHuE small-5Os1Bb statusStatic-3QpK4G status-2s6iDp"> 35</div> 36</div> 37</span> 38<div class="memberInner-2CPc3V"> 39<div class="nameTag-3p0yK- nameTag-m8r81H" style="color: rgb(31, 139, 76);"> 40<span class="usernameOnline-3jr_0Y username-1cB_5E">PinMessageForMe 41</span> 42<span class="botTagRegular-2HEhHi botTag-2WPJ74 bot-2Fta1w">BOT 43</span> 44</div> 45</div> 46</div> 47</div> 48<div class="memberOnline-1CIh-0 member-3W1lQa"> 49<div class="content-OzHfo4"> 50<span class="avatarWrapper-3B0ndJ"> 51<div class="wrapper-2F3Zv8 small-5Os1Bb"> 52<div class="image-33JSyf small-5Os1Bb mask-3OgeRz " style="background-image: url("https://cdn.discordapp.com/avatars/352815000257167362/c08b76b0ad7e4d0f75b69241c40b0266.png?size=128");"> 53</div> 54<div class="online-2S838R status-oxiHuE small-5Os1Bb statusStatic-3QpK4G status-2s6iDp"> 55</div> 56</div> 57</span> 58<div class="memberInner-2CPc3V"> 59<div class="nameTag-3p0yK- nameTag-m8r81H" style="color: rgb(31, 139, 76);"> 60<span class="usernameOnline-3jr_0Y username-1cB_5E">Xp-Bot 61</span> 62<span class="botTagRegular-2HEhHi botTag-2WPJ74 bot-2Fta1w">BOT 63</span> 64</div> 65</div> 66</div> 67</div> 68<div class="memberOnline-1CIh-0 member-3W1lQa"> 69<div class="content-OzHfo4"> 70<span class="avatarWrapper-3B0ndJ"> 71<div class="wrapper-2F3Zv8 small-5Os1Bb"> 72<div class="image-33JSyf small-5Os1Bb mask-3OgeRz " style="background-image: url("https://cdn.discordapp.com/avatars/388110488929566720/5fa47356705500b6a8ef5f876dbd939a.png?size=128");"> 73</div> 74<div class="online-2S838R status-oxiHuE small-5Os1Bb statusStatic-3QpK4G status-2s6iDp"> 75</div> 76</div> 77</span> 78<div class="memberInner-2CPc3V"> 79<div class="nameTag-3p0yK- nameTag-m8r81H" style="color: rgb(31, 139, 76);"> 80<span class="usernameOnline-3jr_0Y username-1cB_5E">XPFiat-BOT 81</span> 82<span class="botTagRegular-2HEhHi botTag-2WPJ74 bot-2Fta1w">BOT 83</span> 84</div> 85<div class="flex-1xMQg5 flex-1O1GKY horizontal-1ae9ci horizontal-2EEEnY flex-1O1GKY directionRow-3v3tfG justifyStart-2NDFzi alignCenter-1dQNNs noWrap-3jynv6 activity-1IYsbk" style="flex: 1 1 auto;"> 86<div class="activityText-sLG0UL"> 87<strong>0.004円 [23:08:09] 88</strong>をプレイ中 89</div> 90</div> 91</div> 92</div> 93</div> 94<div class="membersGroup-v9BXpm">XP Staff—2 95</div> 96<div class="memberOnline-1CIh-0 member-3W1lQa"> 97<div class="content-OzHfo4"> 98<span class="avatarWrapper-3B0ndJ"> 99<div class="wrapper-2F3Zv8 small-5Os1Bb"> 100<div class="image-33JSyf small-5Os1Bb mask-3OgeRz " style="background-image: url("https://cdn.discordapp.com/avatars/344553014893346816/e3607dd7258d9d769734b213bb0cf8eb.png?size=128");"> 101</div> 102<div class="online-2S838R status-oxiHuE small-5Os1Bb statusStatic-3QpK4G status-2s6iDp"> 103</div> 104</div> 105</span> 106<div class="memberInner-2CPc3V"> 107<div class="nameTag-3p0yK- nameTag-m8r81H" style="color: rgb(46, 204, 113);"> 108<span class="usernameOnline-3jr_0Y username-1cB_5E">CryptoDroid 109</span> 110</div> 111</div> 112</div> 113</div> 114<div class="memberOnline-1CIh-0 member-3W1lQa"> 115<div class="content-OzHfo4"> 116<span class="avatarWrapper-3B0ndJ"> 117<div class="wrapper-2F3Zv8 small-5Os1Bb"> 118<div class="image-33JSyf small-5Os1Bb mask-3OgeRz " style="background-image: url("https://cdn.discordapp.com/avatars/275730355036618752/b887d021e179bfb1a2777fda154f0f5e.png?size=128");"> 119</div> 120・ 121・ 122・ 123・
回答2件
0
Discordのソースからスクロールイベントのjsを調べれば出来そうでしたが自分では厳しかったため、
PtyhonAutoGuiを使用してマウススクロールして無理やり解決しました。
投稿2018/08/14 09:29
総合スコア18
0
ベストアンサー
html
1<div style="overflow-y:scroll;">
（内包要素が上下幅を越えた際，縦スクロールバーを表示）
みたいな感じにしたいってことですか？
どうしても外部スクリプトから動かしたそうなので，追記
自動スクロールのさせ方
https://thimbleprojects.org/liveasnotes/530810/
cf. 【JavaScript】要素の位置にスクロールする
seleniumは使ったことないので，何とも言えないけど，JSが使えるっぽいので，
①DOMツリーをクラス名なり入れ子構造なりから辿って，セレクタを変数に格納
②セレクタ（スクロールさせたいやつ）に対して，任意の関数（スクロールさせるやつ）を，自動＋定期で発火させるスクリプトを書く＋最後の子要素に自動でidを付け直すスクリプトを書く
って感じかなあ，とか思ってたけど，こっちでも良さそう：
JavaScriptでスクロールを最下部に移動する方法
まあ，いろいろ試してみてください
詰んだら，
・どんな環境で
・どんなコードを書いて，
・どんなエラーになったのか
を教えてください
投稿2018/08/05 11:15
編集2018/08/08 09:59
総合スコア1284
確認が遅れ大変申し訳ございません！
<div class="scroller-2FKFPG members-1998pB">
この要素の内にメンバーの一人ずつの要素があるのですが、スクロールすると
現在表示されていないユーザーが表示されるようになります。
これをjavascript or selenium等で操作できないかと思っております。
現状と課題がいまいち曖昧なので確認したいのですが，
現状：Discordの画面のその部分が，参加者の増減？発言?に合わせて，自動でスクロールしてくれない
課題：要素が追加されると，自動で最下部へスクロールされるようにしたい
ということで良いでしょうか？
スクロールバーが表示されるようにさえなれば良いというのならユーザースタイルシートを書けば済みそうですが，スクロールを操作するとなると，確かにJSが要りますね
回答欄に追記します
またも返信が遅れて申し訳ございません・・・
ご回答誠にありがとうございます！
まだ試せていないですが、資料を参考に勉強しつつ試して見たいと思います！
あなたの回答
tips
プレビュー
