背景を固定した状態で、特定の要素のみスクロールで変更する方法

Question

質問内容

名称などわからずうまく説明できないのですが、以下の参考サイトのようなデザインの実装方法が知りたいです。
実装方法の検討がつかないため、ヒントになりそうなことや参考になるサイトの情報だけでもいいのでご教授よろしくお願いいたします。
参考サイト01
参考サイト02

実現したいこと

次の「実装イメージ」ようなデザインでナビゲーションのクリックだけでなく、上下スクロール（スマホではフリック）でもセクションの移動をしたいです。
また、「先頭のセクションで上スクロールをした場合には最後のセクションへ」、「最後のセクションで下フリックをすれば先頭のセクションへ」といった移動も実現したいです。

実装イメージ
＊コードはわかりやすいと感じたのでフォークさせてもらったものです

知りたいことの詳細と試したこと

1. 背景が固定された状態でスクロールをどのように検知しているか

単純に背景となる要素にposition: fixed;を使用すると、JavaScriptでaddEventListener("scroll")が発火せずスクロールイベントを検知できませんでした。（座標の移動が起こらないので発火しないということは理解しています。）
また、背景を画像にすることを想定していないので、background-attachmentなどを使用したパララックスの応用では解決できませんでした。

2. どのような検索方法をすればサンプルなどをみつけられるか

実装方法の検討がつかなかったため、「GSAP（上記の参考サイトではどちらもGSAPを使用しているようだったから）」「背景固定 スクロール」「擬似フリック PC」「スクロールスナップ」などのキーワードで検索をしたのですが、有益な情報を得られませんでした。
前述の参考サイト01、02のようなデザイン(?)、アニメーション(?)に名称はあるのでしょうか？
もしくは、適切な検索キーワードなどがあれば教えていただけないでしょうか？

Answer 1

Element: wheel イベントを発見し、これで解決できそうなので自己解決とさせていただきます。

ホイール方向の取得や、スマホではtouchmoveへ切り替えるなど考える事は多そうですが前には進めそうです。

ホイールイベントの delta* 値は必ずしもコンテンツのスクロール方向を反映しているとは限りません。

参考になりそうな記事も見つけました。
マウスホイールで切り替わる全画面コンテンツをつくってみた

Answer 2

とりあえずアイデアだけ。
実際にできるかどうかは確認してません。

position: sticky; でブロックを固定させる。下記を参考に。

position: stickyの面白い使い方と使用時の注意点 | Rriver

スクロールバーは非表示にする。

スクロールバーの削除（新エッジ対応編） | SeekNext合同会社(シークネクスト)

上記で実装イメージのような動きがスクロールで可能になります。

また、「先頭のセクションで上スクロールをした場合には最後のセクションへ」、「最後のセクションで下フリックをすれば先頭のセクションへ」といった移動も実現したいです。

これに関してはCSSだけでは無理ぽっいので、jsでなんとかすることになりそうですね。
最後までスクロールしたら、強制的に先頭に戻すとかでいけるかな。

Comments

[TYABUDAI6]

回答ありがとうございます。
position: sticky; の方法はできなくはなかったのですが、無理矢理すぎるスタイルになることと、「先頭のセクションで上スクロールをした場合には最後のセクションへ」の部分はどちらにせよ実現不可能なのでほかの方法を探したいと思っております。

>これに関してはCSSだけでは無理ぽっいので、jsでなんとかすることになりそうですね。
そうですね。
参考で提示させていただいたサイトでは、is-next、is-prevクラスをJSで制御したり、GSAPでtransformさせることで実現しているようでした。
簡単な方法であれば、セクションをひとまとめにし、最下段に到達したら一番目の子要素を最下段に移動させるといった形なども例がありました。
これらはスクロールの仕組みさえわかれば自力でなんとかなりそうではあるのですが,,,,,