fullpage.js使用時にスクロールイベントが使えない

Question

fullpage.js使用時にsecitonの途中にある要素がスクロール範囲に入ったらフェードインさせるようにしたいのですが、fullspage.jsによってスクロールイベントが実行できなくて困っています。fullpage.jsと併用してjsのスクロールイベントを実行させる、またはスクロールイベント以外の方法でスクロールに連動してイベントを実行する方法がありましたら教えて頂きたいです。

Answer 1

A class of the form fp-viewing-SECTION-SLIDE is added to the body element of the site. (eg: fp-viewing-secondPage-0) The SECTION and SLIDE parts will be the anchors (or indexes if no anchor is provided) of the current section and slide.

State classes added by fullpage.js | GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

とのことですので、こちらを利用されてはいかがですか？

また、ドキュメントにはありませんでしたが、公式トップページの動作を見てみたところ、ページスクロールに合わせて.fp-completelyが付くようでしたので、こちらを利用してもいいかもしれません。

Comments

[Ryoma0305]

これだと次のページ（セクション）にスクロールされたタイミングで実行は出来ると思うのですが、今回はページの途中の特定の要素に到達した際にイベントを発動したいです。

[Lhankor_Mhy]

コードが挙げていただいていないので推測でしかありませんが、それでもできそうな気がします。

でもまあ難しいとお考えでしたら、 intersection observer をお使いになってはいかがですか？

[Ryoma0305]

ありがとうございます。intersection observerで解決できました。大変感謝です！