teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問横スクロールのコンテンツで、最後の要素が見えた時の処理

編集履歴

質問編集履歴

2

コード修正

2018/05/29 03:58

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -49,3 +49,219 @@
49
49
  ## コード
50
50
 
51
51
  https://jsfiddle.net/wata/L1j6um1u/1/
52
+
53
+
54
+
55
+ html
56
+
57
+ ```
58
+
59
+ <div class="scrollContent" data-scroll-area="">
60
+
61
+ <ul class="scrollContentList">
62
+
63
+ <li class="scrollContentListItem" data-list-item="">
64
+
65
+ <div class="itemWrapper">
66
+
67
+ <p class="itemText">これはアイテムです。</p>
68
+
69
+ </div>
70
+
71
+ </li>
72
+
73
+ <li class="scrollContentListItem" data-list-item="">
74
+
75
+ <div class="itemWrapper">
76
+
77
+ <p class="itemText">これはアイテムです。</p>
78
+
79
+ </div>
80
+
81
+ </li>
82
+
83
+ <li class="scrollContentListItem" data-list-item="">
84
+
85
+ <div class="itemWrapper">
86
+
87
+ <p class="itemText">これはアイテムです。</p>
88
+
89
+ </div>
90
+
91
+ </li>
92
+
93
+ <li class="scrollContentListItem" data-list-item="">
94
+
95
+ <div class="itemWrapper">
96
+
97
+ <p class="itemText">これはアイテムです。</p>
98
+
99
+ </div>
100
+
101
+ </li>
102
+
103
+ <li class="scrollContentListItem" data-list-item="">
104
+
105
+ <div class="itemWrapper">
106
+
107
+ <p class="itemText">これはアイテムです。</p>
108
+
109
+ </div>
110
+
111
+ </li>
112
+
113
+ <li class="scrollContentListItem" data-list-item="">
114
+
115
+ <div class="itemWrapper">
116
+
117
+ <p class="itemText">これはアイテムです。</p>
118
+
119
+ </div>
120
+
121
+ </li>
122
+
123
+ <li class="scrollContentListItem" data-list-item="">
124
+
125
+ <div class="itemWrapper">
126
+
127
+ <p class="itemText">これはアイテムです。</p>
128
+
129
+ </div>
130
+
131
+ </li>
132
+
133
+ <li class="scrollContentListItem" data-list-item="">
134
+
135
+ <div class="itemWrapper">
136
+
137
+ <p class="itemText">これはアイテムです。</p>
138
+
139
+ </div>
140
+
141
+ </li>
142
+
143
+ </ul>
144
+
145
+ </div>
146
+
147
+ <div class="btns">
148
+
149
+ <div class="prev" data-prev="">前</div>
150
+
151
+ <div class="next" data-next="">次</div>
152
+
153
+ </div>
154
+
155
+ ```
156
+
157
+
158
+
159
+ css
160
+
161
+ ```
162
+
163
+ .scrollContent {
164
+
165
+ width: 200px;
166
+
167
+ height: 200px;
168
+
169
+ border: 1px solid #ff0000;
170
+
171
+ padding: 20px;
172
+
173
+ overflow-x: scroll;
174
+
175
+ }
176
+
177
+
178
+
179
+ .scrollContentList {
180
+
181
+ list-style-type: none;
182
+
183
+ padding: 0;
184
+
185
+ margin: 0;
186
+
187
+ white-space: nowrap;
188
+
189
+ display: inline-block;
190
+
191
+ }
192
+
193
+
194
+
195
+ .scrollContentListItem {
196
+
197
+ display: inline-block;
198
+
199
+ border: 1px solid #333333;
200
+
201
+ width: 100px;
202
+
203
+ white-space: normal;
204
+
205
+ }
206
+
207
+ .btns {
208
+
209
+ margin-top: 50px;
210
+
211
+ }
212
+
213
+ .prev, .next {
214
+
215
+ border: 1px solid #333333;
216
+
217
+ display: inline-block;
218
+
219
+ }
220
+
221
+ ```
222
+
223
+
224
+
225
+ js
226
+
227
+ ```
228
+
229
+ const $scrollArea = $('[data-scroll-area]');
230
+
231
+ const item = document.querySelector('[data-list-item]');
232
+
233
+ const prev = document.querySelector('[data-prev]');
234
+
235
+ const next = document.querySelector('[data-next]');
236
+
237
+
238
+
239
+
240
+
241
+ if ($scrollArea[0].scrollLeft === 0) {
242
+
243
+ prev.style.display = 'none';
244
+
245
+ } else {
246
+
247
+ prev.style.display = 'inline-block';
248
+
249
+ }
250
+
251
+
252
+
253
+ prev.addEventListener('click', () => {
254
+
255
+ $($scrollArea).animate({ scrollLeft: 0 }, 500, 'swing');
256
+
257
+ });
258
+
259
+
260
+
261
+ next.addEventListener('click', () => {
262
+
263
+ $($scrollArea).animate({ scrollLeft: 200 }, 500, 'swing');
264
+
265
+ });
266
+
267
+ ```

1

タイトル修正

2018/05/29 03:58

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- [javascript]横スクロールのコンテンツで、最後の要素が見えた時の処理
1
+ 横スクロールのコンテンツで、最後の要素が見えた時の処理
test CHANGED
File without changes