teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問スムーススクロールの実装

編集履歴

質問編集履歴

5

一部修正

2015/10/11 02:31

投稿

flat
flat

スコア617

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  <head>
14
14
 
15
- <title>表示領域よりも表示内容が大きい時にスクロールで表示</title>
15
+ <title>要素の表示領域に収まらないコンテンツを横スクロール</title>
16
16
 
17
17
  <meta charset="utf-8">
18
18
 
@@ -26,13 +26,11 @@
26
26
 
27
27
  overflow: hidden;
28
28
 
29
- max-width: 1000px;
30
-
31
- min-width: 300px;
29
+ width: 300px;
32
30
 
33
31
  height: 40px;
34
32
 
35
- margin: 0 auto;
33
+ margin: 100px auto 0;
36
34
 
37
35
  }
38
36
 
@@ -118,21 +116,21 @@
118
116
 
119
117
 
120
118
 
121
- // 要素内のコンテンツが要素の幅を超えた時にホイールスクロールで表示
122
-
123
119
  function wheelScroll( event ) {
124
120
 
125
121
  var doc = event.target,
126
122
 
127
123
  elements = doc.getElementsByClassName( 'scroll-inner' );
128
124
 
125
+
126
+
129
127
  // 要素が無い時は処理を終了
130
128
 
131
129
  if ( typeof elements[0] === 'undefined' ) return;
132
130
 
133
131
 
134
132
 
135
- // ブラウザが対応しているホイールイベントを変数にセット
133
+ // ブラウザが対応しているホイールイベントを変数に設定
136
134
 
137
135
  var mouseWheelEvent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
138
136
 
@@ -148,9 +146,7 @@
148
146
 
149
147
 
150
148
 
151
- // 表示領域よりもコンテンツが大きい時にイベントリスナーを登録
152
-
153
- if ( width > frame ) element.addEventListener( mouseWheelEvent, wheelMove, false );
149
+ element.addEventListener( mouseWheelEvent, scroll, false );
154
150
 
155
151
  }
156
152
 
@@ -164,11 +160,11 @@
164
160
 
165
161
  delta = event.deltaY ? event.deltaY : event.wheelDelta ? event.wheelDelta : event.detail,
166
162
 
167
- width = element.scrollWidth, // 表示内容の幅
163
+ width = element.scrollWidth,
168
-
164
+
169
- frame = ( element.innerWidth || element.clientWidth ), // 表示領域の幅
165
+ frame = ( element.innerWidth || element.clientWidth ),
170
-
166
+
171
- end = width - frame, // スクロールの終端位置
167
+ end = width - frame,
172
168
 
173
169
  move;
174
170
 
@@ -200,22 +196,30 @@
200
196
 
201
197
 
202
198
 
203
- function scroll() {
204
-
205
- element.scrollLeft = move;
206
-
207
- scroll = setTimeout( "scroll()", 15 );
208
-
209
- };
210
-
211
-
212
-
213
- return scroll;
199
+ return move;
200
+
201
+
214
202
 
215
203
  }
216
204
 
217
205
 
218
206
 
207
+ function scroll( event ) {
208
+
209
+ var element = event.currentTarget,
210
+
211
+ move = wheelMove(),
212
+
213
+ timer;
214
+
215
+ element.scrollLeft = move;
216
+
217
+ timer = setTimeout( 'scroll()', 15 );
218
+
219
+ }
220
+
221
+
222
+
219
223
  document.addEventListener( 'DOMContentLoaded', wheelScroll, false );
220
224
 
221
225
 

4

途中経過

2015/10/11 02:31

投稿

flat
flat

スコア617

test CHANGED
File without changes
test CHANGED
@@ -200,7 +200,17 @@
200
200
 
201
201
 
202
202
 
203
+ function scroll() {
204
+
203
- element.scrollLeft = move;
205
+ element.scrollLeft = move;
206
+
207
+ scroll = setTimeout( "scroll()", 15 );
208
+
209
+ };
210
+
211
+
212
+
213
+ return scroll;
204
214
 
205
215
  }
206
216
 

3

修正し忘れた箇所を修正

2015/10/11 02:09

投稿

flat
flat

スコア617

test CHANGED
File without changes
test CHANGED
@@ -168,7 +168,9 @@
168
168
 
169
169
  frame = ( element.innerWidth || element.clientWidth ), // 表示領域の幅
170
170
 
171
- end = width - frame; // スクロールの終端位置
171
+ end = width - frame, // スクロールの終端位置
172
+
173
+ move;
172
174
 
173
175
 
174
176
 
@@ -176,7 +178,7 @@
176
178
 
177
179
  event.preventDefault();
178
180
 
179
- var move = element.scrollLeft + 30;
181
+ move = element.scrollLeft + 30;
180
182
 
181
183
 
182
184
 
@@ -184,7 +186,7 @@
184
186
 
185
187
  event.preventDefault();
186
188
 
187
- var move = element.scrollLeft - 30;
189
+ move = element.scrollLeft - 30;
188
190
 
189
191
 
190
192
 

2

若干修正

2015/10/10 13:36

投稿

flat
flat

スコア617

test CHANGED
File without changes
test CHANGED
@@ -176,9 +176,7 @@
176
176
 
177
177
  event.preventDefault();
178
178
 
179
- var distance = element.scrollLeft + 30;
179
+ var move = element.scrollLeft + 30;
180
-
181
- element.scrollLeft = distance;
182
180
 
183
181
 
184
182
 
@@ -186,9 +184,7 @@
186
184
 
187
185
  event.preventDefault();
188
186
 
189
- var distance = element.scrollLeft - 30;
187
+ var move = element.scrollLeft - 30;
190
-
191
- element.scrollLeft = distance;
192
188
 
193
189
 
194
190
 
@@ -196,8 +192,14 @@
196
192
 
197
193
  return;
198
194
 
195
+
196
+
199
197
  }
200
198
 
199
+
200
+
201
+ element.scrollLeft = move;
202
+
201
203
  }
202
204
 
203
205
 

1

コードの説明が欠けていたので追記

2015/10/10 13:33

投稿

flat
flat

スコア617

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  <head>
14
14
 
15
- <title>Scroll Content</title>
15
+ <title>表示領域よりも表示内容が大きい時にスクロールで表示</title>
16
16
 
17
17
  <meta charset="utf-8">
18
18
 
@@ -118,6 +118,8 @@
118
118
 
119
119
 
120
120
 
121
+ // 要素内のコンテンツが要素の幅を超えた時にホイールスクロールで表示
122
+
121
123
  function wheelScroll( event ) {
122
124
 
123
125
  var doc = event.target,