質問編集履歴

1

質問を2つに分け、現状コードを記述しました。

2019/04/12 07:26

投稿

uzurazura
uzurazura

スコア16

test CHANGED
File without changes
test CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
 
4
4
 
5
+ ### やりたいこと
6
+
5
7
  ひとつのページ内で、以下の3つのスクロールに関する条件をブロックごとに使い分けたいです。
6
8
 
7
9
 
@@ -16,14 +18,236 @@
16
18
 
17
19
 
18
20
 
19
-
20
-
21
- ※ちなみに②[jQuery Scrollify](https://webdesignday.jp/inspiration/technique/jquery-js/3812/)は、既に使用している[jQuery.inview.js](https://gimmicklog.com/jquery/581/)と併用するとケンカしてしまうようで使えません。
22
-
23
-
24
-
25
- それぞれ個別でテストは動くですが、3つを混ぜ合わせてページングすることが出来ません。
26
-
27
-
28
-
29
- どなたかこような条件でページを制御する方法がわかる方、ご教授願います。
21
+ ### 問題:1
22
+
23
+
24
+
25
+
26
+
27
+ ①と②併用での問題点
28
+
29
+ Scrollify用クラス以外のクラスや要素(★)を入れると
30
+
31
+ ・★部分がスクロールっ飛ばされ
32
+
33
+ ・最後が★の場合1つ手前のScrollifyが効かなくなる
34
+
35
+
36
+
37
+ ```html
38
+
39
+ <!--②Scrollify的な動きをさせたいブロック-->
40
+
41
+ <div class="box box1">
42
+
43
+ <img src="画像A.png" width=100%>
44
+
45
+ </div>
46
+
47
+
48
+
49
+ <!--②Scrollify的な動きをさせたいブロック-->
50
+
51
+ <div class="box box2">
52
+
53
+ <img src="画像B.png" width=100%>
54
+
55
+ </div>
56
+
57
+
58
+
59
+ <!--★①標準スクロールさせたいブロック-->
60
+
61
+ <img src="画像C.png" width=100%>
62
+
63
+
64
+
65
+ <!--②Scrollify的な動きをさせたいブロック-->
66
+
67
+ <div class="box box3">
68
+
69
+ <img src="画像D.png" width=100%>
70
+
71
+ </div>
72
+
73
+
74
+
75
+ <!--★①標準スクロールさせたいブロック-->
76
+
77
+ <img src="画像E.png" width=100%>
78
+
79
+
80
+
81
+
82
+
83
+
84
+
85
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
86
+
87
+ <script src="testscript.js"></script>
88
+
89
+ <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
90
+
91
+ <script src="https://cdn.jsdelivr.net/npm/jquery-scrollify@1/jquery.scrollify.min.js"></script>
92
+
93
+
94
+
95
+ ```
96
+
97
+ ```javascript
98
+
99
+ $(function() {
100
+
101
+ $.scrollify({section:".box"});
102
+
103
+ });
104
+
105
+ ```
106
+
107
+
108
+
109
+
110
+
111
+ ### 問題:2
112
+
113
+
114
+
115
+ ③について、①②との併用以前の質問になります。
116
+
117
+ [この記事](http://arakaze.ready.jp/archives/3152)のやり方でスクロールを一時的に停止・再開させたいですが、htmlに何を記述したら良いのか分かりません。
118
+
119
+ 条件には[jQuery]inview.jsを使いたいです。
120
+
121
+ 書いてみたコードはこれです↓
122
+
123
+
124
+
125
+ ```javascript
126
+
127
+ //可視範囲に入ったら
128
+
129
+ $(function() {
130
+
131
+ $('p').on('inview', function(event, isInView) {
132
+
133
+ var p = $('p', this)[0];
134
+
135
+ if (isInView) {
136
+
137
+
138
+
139
+ //スクロール禁止用関数
140
+
141
+ function no_scroll(){
142
+
143
+ //PC用
144
+
145
+ var scroll_event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
146
+
147
+ $(document).on(scroll_event,function(e){e.preventDefault();});
148
+
149
+ //SP用
150
+
151
+ $(document).on('touchmove.noScroll', function(e) {e.preventDefault();});
152
+
153
+ }
154
+
155
+
156
+
157
+ //可視範囲を出たら
158
+
159
+ } else {
160
+
161
+
162
+
163
+ //スクロール復活用関数
164
+
165
+ function return_scroll(){
166
+
167
+ //PC用
168
+
169
+ var scroll_event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
170
+
171
+ $(document).off(scroll_event);
172
+
173
+ //SP用
174
+
175
+ $(document).off('.noScroll');
176
+
177
+ }
178
+
179
+
180
+
181
+ });
182
+
183
+ ```
184
+
185
+ 最終的には、下記のように①②③を混在させた形にしたいです
186
+
187
+
188
+
189
+ ```html
190
+
191
+ <!--②Scrollify的な動きをさせたいブロック-->
192
+
193
+ <div class="box box1">
194
+
195
+ <img src="画像A.png" width=100%>
196
+
197
+ </div>
198
+
199
+
200
+
201
+ <!--②Scrollify的な動きをさせたいブロック-->
202
+
203
+ <div class="box box2">
204
+
205
+ <img src="画像B.png" width=100%>
206
+
207
+ </div>
208
+
209
+
210
+
211
+ <!--①標準スクロールさせたいブロック-->
212
+
213
+ <img src="画像C.png" width=100%>
214
+
215
+
216
+
217
+ <!--③一時的にスクロール停止・再開させたいブロック-->
218
+
219
+ <p>テキスト</p>
220
+
221
+
222
+
223
+ <!--①標準スクロールさせたいブロック-->
224
+
225
+ <img src="画像E.png" width=100%>
226
+
227
+
228
+
229
+ <!--②Scrollify的な動きをさせたいブロック-->
230
+
231
+ <div class="box box3">
232
+
233
+ <img src="画像C.png" width=100%>
234
+
235
+ </div>
236
+
237
+
238
+
239
+
240
+
241
+
242
+
243
+ これらを繰り返す
244
+
245
+
246
+
247
+ ```
248
+
249
+
250
+
251
+
252
+
253
+ どなたかこのような条件でページを制御する方法またがわかる方、ご教授願います。