回答編集履歴
1
訂正
test
CHANGED
|
@@ -1,2 +1,29 @@
|
|
|
1
|
-
Intersection Observer を使うのがいいかと思います。
|
|
1
|
+
~~Intersection Observer を使うのがいいかと思います。
|
|
2
|
-
[JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA](https://ics.media/entry/190902/)
|
|
2
|
+
[JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA](https://ics.media/entry/190902/)~~
|
|
3
|
+
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
質問の内容に合わなかったので訂正します。
|
|
7
|
+
|
|
8
|
+
transitionend イベントを使うといいかと思います。
|
|
9
|
+
|
|
10
|
+
サンプルを置いておきます。
|
|
11
|
+
[https://jsfiddle.net/Lhankor_Mhy/dLmh9ywu/](https://jsfiddle.net/Lhankor_Mhy/dLmh9ywu/)
|
|
12
|
+
|
|
13
|
+
```js
|
|
14
|
+
scaler.addEventListener('transitionstart', e => {
|
|
15
|
+
$('a').removeClass('active')
|
|
16
|
+
$('.section').removeClass('active')
|
|
17
|
+
})
|
|
18
|
+
|
|
19
|
+
scaler.addEventListener('transitionend', e => {
|
|
20
|
+
const target = $('.section')[scaler.style.transform.match(/\d+/)[0] / 5];
|
|
21
|
+
$(target).addClass('active')
|
|
22
|
+
$(`[href="#${target.id}"]`).addClass('active')
|
|
23
|
+
})
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
参考：
|
|
29
|
+
[HTMLElement: transitionend イベント - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/transitionend_event)
|