質問編集履歴
4
実装したい具体例を追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
### ＊＊＊実現したい事＊＊＊
|
|
10
10
|
|
|
11
|
-
スクロールして写真がビューポート内に入るとカウントを１足していき、次の写真がビューポート内に入ると２と表示されていく機能を実装したいです。
|
|
11
|
+
スクロールして写真がビューポート内に入るとカウントを１足していき、次の写真がビューポート内に入ると２と表示されていく機能を実装したいです。例）01(カウント)/20(合計数), 02/20, 03/20, 04/20
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
@@ -28,19 +28,21 @@
|
|
|
28
28
|
|
|
29
29
|
### ＊＊＊追記＊＊＊
|
|
30
30
|
|
|
31
|
-
２枚目の写真と説明を加え
|
|
31
|
+
２枚目の写真と説明を加えます。右端の01/20はfixedなのでスクロールしても固定されてついていきます。
|
|
32
32
|
|
|
33
|
+
img２の２０ー４０％くらいが画面内に入ったらカウントは”２”。
|
|
34
|
+
|
|
33
|
-
さらにスクロールをして、
|
|
35
|
+
さらにスクロールをして、img３の２０ー４０％くらいが画面内に入ったらカウントは”３”
|
|
34
36
|
|
|
35
37
|
このようなイメージでカウントをしていきたいと思っています。
|
|
36
38
|
|
|
37
39
|
|
|
38
40
|
|
|
39
|
-
もし一番下までスクロールして
|
|
41
|
+
もし一番下までスクロールしてimgがもうない場合（合計数に達した場合）は、カウントは止まります。
|
|
40
42
|
|
|
41
43
|
|
|
42
44
|
|
|
43
|
-
下から上にスクロールした場合（上に戻る、逆スクロール）は、カウント数は減らしたいです。例）
|
|
45
|
+
下から上にスクロールした場合（上に戻る、逆スクロール）は、カウント数は減らしたいです。例）06/20、05/20、04/20、03/20、02/20,,,
|
|
44
46
|
|
|
45
47
|
|
|
46
48
|
|
3
参考記事のリンク貼り付け
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -41,6 +41,12 @@
|
|
|
41
41
|
|
|
42
42
|
|
|
43
43
|
下から上にスクロールした場合（上に戻る、逆スクロール）は、カウント数は減らしたいです。例）６、５、４、３、２,,,
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
実装したいイメージと近い記事を見つけました。[Intersection Observer](https://ics.media/entry/190902/)
|
|
48
|
+
|
|
49
|
+
|
|
44
50
|
|
|
45
51
|
|
|
46
52
|
|
2
詳しく説明追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -19,6 +19,30 @@
|
|
|
19
19
|
ロジックやご指摘、アドバイスなどをいただけると幸いです。
|
|
20
20
|
|
|
21
21
|
よろしくお願いします。！
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
### ＊＊＊追記＊＊＊
|
|
30
|
+
|
|
31
|
+
２枚目の写真と説明を加えるなら、要素２の２０ー４０％くらいが画面内に入ったらカウントは”２”。
|
|
32
|
+
|
|
33
|
+
さらにスクロールをして、要素３の２０ー４０％くらいが画面内に入ったらカウントは”３”
|
|
34
|
+
|
|
35
|
+
このようなイメージでカウントをしていきたいと思っています。
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
もし一番下までスクロールして要素がもうない場合（要素の合計数に達した場合）は、カウントは止まります。
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
下から上にスクロールした場合（上に戻る、逆スクロール）は、カウント数は減らしたいです。例）６、５、４、３、２,,,
|
|
44
|
+
|
|
45
|
+
|
|
22
46
|
|
|
23
47
|
|
|
24
48
|
|
1
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
記事に登録されている写真の合計数は取得できました。
|
|
16
16
|
|
|
17
|
-
そして各写真をターゲット要素にして、それぞれの要素のトップの高さも取得できましたが、この後どのようなコードを書いていいのかわから
|
|
17
|
+
そして各写真をターゲット要素にして、それぞれの要素のトップの高さも取得できましたが、この後どのようなコードを書いていいのかわからず手が止まっている状態です。。。
|
|
18
18
|
|
|
19
19
|
ロジックやご指摘、アドバイスなどをいただけると幸いです。
|
|
20
20
|
|