teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問div classの要素に対して、スクロールを行いたいと思っております。

編集履歴

質問編集履歴

3

添付画像を削除しました

2022/08/03 16:36

投稿

K_O
K_O

スコア18

test CHANGED
File without changes
test CHANGED
@@ -1,285 +1,143 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
-
4
-
5
3
  Web版のDiscordより、メンバー表示部分をJavaxcriptでスクロールさせたいと思っております。
6
-
7
4
  要素を確認するとdiv class内に収まっておりますが、どのようにするとスクロールできるでしょうか。
8
5
 
9
-
10
-
11
6
  ネットでスクロールを調べてwindow.scrollで可能程度しか認識できておらず
12
-
13
7
  こちらでは出来ず困っております。
14
-
15
8
  何卒ご教授いただけませんでしょうか。
16
-
17
-
18
9
 
19
10
  ■Discord該当箇所の一部ソース(bodyタグ内)
20
11
 
21
-
22
-
23
12
  ※以下箇所をスクロールしたいと思います
24
-
25
13
  <div class="membersWrap-2h-GB4">
26
-
27
14
  <div class="scrollerWrap-2lJEkd scrollerThemed-2oenus themeGhostHairline-DBD-2d scrollerFade-1Ijw5y">
28
15
 
29
-
30
-
31
16
  ```Html
32
-
33
17
  <div class="membersWrap-2h-GB4">
34
-
35
18
  <div class="scrollerWrap-2lJEkd scrollerThemed-2oenus themeGhostHairline-DBD-2d scrollerFade-1Ijw5y">
36
-
37
19
  <div class="scroller-2FKFPG members-1998pB">
38
-
39
20
  <div style="width: 100%; height: 0px; visibility: hidden;">
40
-
41
21
  </div>
42
-
43
22
  <div class="membersGroup-v9BXpm">BOT&#8212;4
44
-
45
23
  </div>
46
-
47
24
  <div class="memberOnline-1CIh-0 member-3W1lQa">
48
-
49
25
  <div class="content-OzHfo4">
50
-
51
26
  <span class="avatarWrapper-3B0ndJ">
52
-
53
27
  <div class="wrapper-2F3Zv8 small-5Os1Bb">
54
-
55
28
  <div class="image-33JSyf small-5Os1Bb mask-3OgeRz " style="background-image: url(&quot;https://cdn.discordapp.com/avatars/441117179405008897/d56b172140207f5e547474ea8ea13c7e.png?size=128&quot;);">
56
-
57
29
  </div>
58
-
59
30
  <div class="online-2S838R status-oxiHuE small-5Os1Bb statusStatic-3QpK4G status-2s6iDp">
60
-
61
31
  </div>
62
-
63
32
  </div>
64
-
65
33
  </span>
66
-
67
34
  <div class="memberInner-2CPc3V">
68
-
69
35
  <div class="nameTag-3p0yK- nameTag-m8r81H" style="color: rgb(31, 139, 76);">
70
-
71
36
  <span class="usernameOnline-3jr_0Y username-1cB_5E">CCWallet
72
-
73
37
  </span>
74
-
75
38
  <span class="botTagRegular-2HEhHi botTag-2WPJ74 bot-2Fta1w">BOT
76
-
77
39
  </span>
78
-
79
40
  </div>
80
-
81
41
  </div>
82
-
83
42
  </div>
84
-
85
43
  </div>
86
-
87
44
  <div class="memberOnline-1CIh-0 member-3W1lQa">
88
-
89
45
  <div class="content-OzHfo4">
90
-
91
46
  <span class="avatarWrapper-3B0ndJ">
92
-
93
47
  <div class="wrapper-2F3Zv8 small-5Os1Bb">
94
-
95
48
  <div class="image-33JSyf small-5Os1Bb mask-3OgeRz " style="background-image: url(&quot;https://cdn.discordapp.com/avatars/415343767789240340/af73c6e9a36f775cee83f33a6be3a480.png?size=128&quot;);">
96
-
97
49
  </div>
98
-
99
50
  <div class="online-2S838R status-oxiHuE small-5Os1Bb statusStatic-3QpK4G status-2s6iDp">
100
-
101
51
  </div>
102
-
103
52
  </div>
104
-
105
53
  </span>
106
-
107
54
  <div class="memberInner-2CPc3V">
108
-
109
55
  <div class="nameTag-3p0yK- nameTag-m8r81H" style="color: rgb(31, 139, 76);">
110
-
111
56
  <span class="usernameOnline-3jr_0Y username-1cB_5E">PinMessageForMe
112
-
113
57
  </span>
114
-
115
58
  <span class="botTagRegular-2HEhHi botTag-2WPJ74 bot-2Fta1w">BOT
116
-
117
59
  </span>
118
-
119
60
  </div>
120
-
121
61
  </div>
122
-
123
62
  </div>
124
-
125
63
  </div>
126
-
127
64
  <div class="memberOnline-1CIh-0 member-3W1lQa">
128
-
129
65
  <div class="content-OzHfo4">
130
-
131
66
  <span class="avatarWrapper-3B0ndJ">
132
-
133
67
  <div class="wrapper-2F3Zv8 small-5Os1Bb">
134
-
135
68
  <div class="image-33JSyf small-5Os1Bb mask-3OgeRz " style="background-image: url(&quot;https://cdn.discordapp.com/avatars/352815000257167362/c08b76b0ad7e4d0f75b69241c40b0266.png?size=128&quot;);">
136
-
137
69
  </div>
138
-
139
70
  <div class="online-2S838R status-oxiHuE small-5Os1Bb statusStatic-3QpK4G status-2s6iDp">
140
-
141
71
  </div>
142
-
143
72
  </div>
144
-
145
73
  </span>
146
-
147
74
  <div class="memberInner-2CPc3V">
148
-
149
75
  <div class="nameTag-3p0yK- nameTag-m8r81H" style="color: rgb(31, 139, 76);">
150
-
151
76
  <span class="usernameOnline-3jr_0Y username-1cB_5E">Xp-Bot
152
-
153
77
  </span>
154
-
155
78
  <span class="botTagRegular-2HEhHi botTag-2WPJ74 bot-2Fta1w">BOT
156
-
157
79
  </span>
158
-
159
80
  </div>
160
-
161
81
  </div>
162
-
163
82
  </div>
164
-
165
83
  </div>
166
-
167
84
  <div class="memberOnline-1CIh-0 member-3W1lQa">
168
-
169
85
  <div class="content-OzHfo4">
170
-
171
86
  <span class="avatarWrapper-3B0ndJ">
172
-
173
87
  <div class="wrapper-2F3Zv8 small-5Os1Bb">
174
-
175
88
  <div class="image-33JSyf small-5Os1Bb mask-3OgeRz " style="background-image: url(&quot;https://cdn.discordapp.com/avatars/388110488929566720/5fa47356705500b6a8ef5f876dbd939a.png?size=128&quot;);">
176
-
177
89
  </div>
178
-
179
90
  <div class="online-2S838R status-oxiHuE small-5Os1Bb statusStatic-3QpK4G status-2s6iDp">
180
-
181
91
  </div>
182
-
183
92
  </div>
184
-
185
93
  </span>
186
-
187
94
  <div class="memberInner-2CPc3V">
188
-
189
95
  <div class="nameTag-3p0yK- nameTag-m8r81H" style="color: rgb(31, 139, 76);">
190
-
191
96
  <span class="usernameOnline-3jr_0Y username-1cB_5E">XPFiat-BOT
192
-
193
97
  </span>
194
-
195
98
  <span class="botTagRegular-2HEhHi botTag-2WPJ74 bot-2Fta1w">BOT
196
-
197
99
  </span>
198
-
199
100
  </div>
200
-
201
101
  <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;">
202
-
203
102
  <div class="activityText-sLG0UL">
204
-
205
103
  <strong>0.004円 [23:08:09]
206
-
207
104
  </strong>をプレイ中
208
-
209
105
  </div>
210
-
211
106
  </div>
212
-
213
107
  </div>
214
-
215
108
  </div>
216
-
217
109
  </div>
218
-
219
110
  <div class="membersGroup-v9BXpm">XP Staff&#8212;2
220
-
221
111
  </div>
222
-
223
112
  <div class="memberOnline-1CIh-0 member-3W1lQa">
224
-
225
113
  <div class="content-OzHfo4">
226
-
227
114
  <span class="avatarWrapper-3B0ndJ">
228
-
229
115
  <div class="wrapper-2F3Zv8 small-5Os1Bb">
230
-
231
116
  <div class="image-33JSyf small-5Os1Bb mask-3OgeRz " style="background-image: url(&quot;https://cdn.discordapp.com/avatars/344553014893346816/e3607dd7258d9d769734b213bb0cf8eb.png?size=128&quot;);">
232
-
233
117
  </div>
234
-
235
118
  <div class="online-2S838R status-oxiHuE small-5Os1Bb statusStatic-3QpK4G status-2s6iDp">
236
-
237
119
  </div>
238
-
239
120
  </div>
240
-
241
121
  </span>
242
-
243
122
  <div class="memberInner-2CPc3V">
244
-
245
123
  <div class="nameTag-3p0yK- nameTag-m8r81H" style="color: rgb(46, 204, 113);">
246
-
247
124
  <span class="usernameOnline-3jr_0Y username-1cB_5E">CryptoDroid
248
-
249
125
  </span>
250
-
251
126
  </div>
252
-
253
127
  </div>
254
-
255
128
  </div>
256
-
257
129
  </div>
258
-
259
130
  <div class="memberOnline-1CIh-0 member-3W1lQa">
260
-
261
131
  <div class="content-OzHfo4">
262
-
263
132
  <span class="avatarWrapper-3B0ndJ">
264
-
265
133
  <div class="wrapper-2F3Zv8 small-5Os1Bb">
266
-
267
134
  <div class="image-33JSyf small-5Os1Bb mask-3OgeRz " style="background-image: url(&quot;https://cdn.discordapp.com/avatars/275730355036618752/b887d021e179bfb1a2777fda154f0f5e.png?size=128&quot;);">
268
-
269
135
  </div>
270
-
271
136
  ・
272
-
273
137
  ・
274
-
275
138
  ・
276
-
277
139
  ・
278
-
279
140
  ```
280
141
 
281
142
 
282
143
 
283
-
284
-
285
- ![イメージ説明](05a30dca3f8412cf773fcb24a2935eba.png)
JavaScriptselenium
JavaScriptselenium

2

補足を追記しました。

2018/07/26 14:14

投稿

K_O
K_O

スコア18

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,15 @@
16
16
 
17
17
 
18
18
 
19
- Discord該当箇所の一部ソース(bodyタグ内)
19
+ ■Discord該当箇所の一部ソース(bodyタグ内)
20
+
21
+
22
+
23
+ ※以下箇所をスクロールしたいと思います
24
+
25
+ <div class="membersWrap-2h-GB4">
26
+
27
+ <div class="scrollerWrap-2lJEkd scrollerThemed-2oenus themeGhostHairline-DBD-2d scrollerFade-1Ijw5y">
20
28
 
21
29
 
22
30
 

1

コードをスニペットで再記載しました。

2018/07/26 14:14

投稿

K_O
K_O

スコア18

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,261 @@
16
16
 
17
17
 
18
18
 
19
- Discord該当箇所のソース
19
+ Discord該当箇所の一部ソース(bodyタグ内)
20
+
21
+
22
+
23
+ ```Html
24
+
25
+ <div class="membersWrap-2h-GB4">
26
+
27
+ <div class="scrollerWrap-2lJEkd scrollerThemed-2oenus themeGhostHairline-DBD-2d scrollerFade-1Ijw5y">
28
+
29
+ <div class="scroller-2FKFPG members-1998pB">
30
+
31
+ <div style="width: 100%; height: 0px; visibility: hidden;">
32
+
33
+ </div>
34
+
35
+ <div class="membersGroup-v9BXpm">BOT&#8212;4
36
+
37
+ </div>
38
+
39
+ <div class="memberOnline-1CIh-0 member-3W1lQa">
40
+
41
+ <div class="content-OzHfo4">
42
+
43
+ <span class="avatarWrapper-3B0ndJ">
44
+
45
+ <div class="wrapper-2F3Zv8 small-5Os1Bb">
46
+
47
+ <div class="image-33JSyf small-5Os1Bb mask-3OgeRz " style="background-image: url(&quot;https://cdn.discordapp.com/avatars/441117179405008897/d56b172140207f5e547474ea8ea13c7e.png?size=128&quot;);">
48
+
49
+ </div>
50
+
51
+ <div class="online-2S838R status-oxiHuE small-5Os1Bb statusStatic-3QpK4G status-2s6iDp">
52
+
53
+ </div>
54
+
55
+ </div>
56
+
57
+ </span>
58
+
59
+ <div class="memberInner-2CPc3V">
60
+
61
+ <div class="nameTag-3p0yK- nameTag-m8r81H" style="color: rgb(31, 139, 76);">
62
+
63
+ <span class="usernameOnline-3jr_0Y username-1cB_5E">CCWallet
64
+
65
+ </span>
66
+
67
+ <span class="botTagRegular-2HEhHi botTag-2WPJ74 bot-2Fta1w">BOT
68
+
69
+ </span>
70
+
71
+ </div>
72
+
73
+ </div>
74
+
75
+ </div>
76
+
77
+ </div>
78
+
79
+ <div class="memberOnline-1CIh-0 member-3W1lQa">
80
+
81
+ <div class="content-OzHfo4">
82
+
83
+ <span class="avatarWrapper-3B0ndJ">
84
+
85
+ <div class="wrapper-2F3Zv8 small-5Os1Bb">
86
+
87
+ <div class="image-33JSyf small-5Os1Bb mask-3OgeRz " style="background-image: url(&quot;https://cdn.discordapp.com/avatars/415343767789240340/af73c6e9a36f775cee83f33a6be3a480.png?size=128&quot;);">
88
+
89
+ </div>
90
+
91
+ <div class="online-2S838R status-oxiHuE small-5Os1Bb statusStatic-3QpK4G status-2s6iDp">
92
+
93
+ </div>
94
+
95
+ </div>
96
+
97
+ </span>
98
+
99
+ <div class="memberInner-2CPc3V">
100
+
101
+ <div class="nameTag-3p0yK- nameTag-m8r81H" style="color: rgb(31, 139, 76);">
102
+
103
+ <span class="usernameOnline-3jr_0Y username-1cB_5E">PinMessageForMe
104
+
105
+ </span>
106
+
107
+ <span class="botTagRegular-2HEhHi botTag-2WPJ74 bot-2Fta1w">BOT
108
+
109
+ </span>
110
+
111
+ </div>
112
+
113
+ </div>
114
+
115
+ </div>
116
+
117
+ </div>
118
+
119
+ <div class="memberOnline-1CIh-0 member-3W1lQa">
120
+
121
+ <div class="content-OzHfo4">
122
+
123
+ <span class="avatarWrapper-3B0ndJ">
124
+
125
+ <div class="wrapper-2F3Zv8 small-5Os1Bb">
126
+
127
+ <div class="image-33JSyf small-5Os1Bb mask-3OgeRz " style="background-image: url(&quot;https://cdn.discordapp.com/avatars/352815000257167362/c08b76b0ad7e4d0f75b69241c40b0266.png?size=128&quot;);">
128
+
129
+ </div>
130
+
131
+ <div class="online-2S838R status-oxiHuE small-5Os1Bb statusStatic-3QpK4G status-2s6iDp">
132
+
133
+ </div>
134
+
135
+ </div>
136
+
137
+ </span>
138
+
139
+ <div class="memberInner-2CPc3V">
140
+
141
+ <div class="nameTag-3p0yK- nameTag-m8r81H" style="color: rgb(31, 139, 76);">
142
+
143
+ <span class="usernameOnline-3jr_0Y username-1cB_5E">Xp-Bot
144
+
145
+ </span>
146
+
147
+ <span class="botTagRegular-2HEhHi botTag-2WPJ74 bot-2Fta1w">BOT
148
+
149
+ </span>
150
+
151
+ </div>
152
+
153
+ </div>
154
+
155
+ </div>
156
+
157
+ </div>
158
+
159
+ <div class="memberOnline-1CIh-0 member-3W1lQa">
160
+
161
+ <div class="content-OzHfo4">
162
+
163
+ <span class="avatarWrapper-3B0ndJ">
164
+
165
+ <div class="wrapper-2F3Zv8 small-5Os1Bb">
166
+
167
+ <div class="image-33JSyf small-5Os1Bb mask-3OgeRz " style="background-image: url(&quot;https://cdn.discordapp.com/avatars/388110488929566720/5fa47356705500b6a8ef5f876dbd939a.png?size=128&quot;);">
168
+
169
+ </div>
170
+
171
+ <div class="online-2S838R status-oxiHuE small-5Os1Bb statusStatic-3QpK4G status-2s6iDp">
172
+
173
+ </div>
174
+
175
+ </div>
176
+
177
+ </span>
178
+
179
+ <div class="memberInner-2CPc3V">
180
+
181
+ <div class="nameTag-3p0yK- nameTag-m8r81H" style="color: rgb(31, 139, 76);">
182
+
183
+ <span class="usernameOnline-3jr_0Y username-1cB_5E">XPFiat-BOT
184
+
185
+ </span>
186
+
187
+ <span class="botTagRegular-2HEhHi botTag-2WPJ74 bot-2Fta1w">BOT
188
+
189
+ </span>
190
+
191
+ </div>
192
+
193
+ <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;">
194
+
195
+ <div class="activityText-sLG0UL">
196
+
197
+ <strong>0.004円 [23:08:09]
198
+
199
+ </strong>をプレイ中
200
+
201
+ </div>
202
+
203
+ </div>
204
+
205
+ </div>
206
+
207
+ </div>
208
+
209
+ </div>
210
+
211
+ <div class="membersGroup-v9BXpm">XP Staff&#8212;2
212
+
213
+ </div>
214
+
215
+ <div class="memberOnline-1CIh-0 member-3W1lQa">
216
+
217
+ <div class="content-OzHfo4">
218
+
219
+ <span class="avatarWrapper-3B0ndJ">
220
+
221
+ <div class="wrapper-2F3Zv8 small-5Os1Bb">
222
+
223
+ <div class="image-33JSyf small-5Os1Bb mask-3OgeRz " style="background-image: url(&quot;https://cdn.discordapp.com/avatars/344553014893346816/e3607dd7258d9d769734b213bb0cf8eb.png?size=128&quot;);">
224
+
225
+ </div>
226
+
227
+ <div class="online-2S838R status-oxiHuE small-5Os1Bb statusStatic-3QpK4G status-2s6iDp">
228
+
229
+ </div>
230
+
231
+ </div>
232
+
233
+ </span>
234
+
235
+ <div class="memberInner-2CPc3V">
236
+
237
+ <div class="nameTag-3p0yK- nameTag-m8r81H" style="color: rgb(46, 204, 113);">
238
+
239
+ <span class="usernameOnline-3jr_0Y username-1cB_5E">CryptoDroid
240
+
241
+ </span>
242
+
243
+ </div>
244
+
245
+ </div>
246
+
247
+ </div>
248
+
249
+ </div>
250
+
251
+ <div class="memberOnline-1CIh-0 member-3W1lQa">
252
+
253
+ <div class="content-OzHfo4">
254
+
255
+ <span class="avatarWrapper-3B0ndJ">
256
+
257
+ <div class="wrapper-2F3Zv8 small-5Os1Bb">
258
+
259
+ <div class="image-33JSyf small-5Os1Bb mask-3OgeRz " style="background-image: url(&quot;https://cdn.discordapp.com/avatars/275730355036618752/b887d021e179bfb1a2777fda154f0f5e.png?size=128&quot;);">
260
+
261
+ </div>
262
+
263
+ ・
264
+
265
+ ・
266
+
267
+ ・
268
+
269
+ ・
270
+
271
+ ```
272
+
273
+
20
274
 
21
275
 
22
276