ページの途中までフル画面コンテンツのスムーススクロールにしたいです。

Question

https://www.crazy.co.jp/

上記サイトは1つ目のコンテンツと2つ目のコンテンツのみフル画面のスムーススクロールにして、そこから下は普通にスクロールになっています。

おそらくjsでマウスのスクロールを制御し、addClassなどしているかと思うのですが、書き方がわかりません。

もしお分かりの方がいらっしゃいましたら、お教えいただけないでしょうか。

Answer 1

コーポレートサイトのJS実装を覗いて書き写すのは憚られるので、
一旦仕組みの説明にとどめます。
ポイントは CSS の transform です。

::::
A トップのコンテンツ
::::
B それ以下のコンテンツ
::::

1. アクセス時

A は 全画面表示になっていて、
B は transform のtranslateYの値にブラウザの表示高さが指定されていることで、ブラウザ表示領域の下部に隠れています。

1. スクロール検出

A 上でのスクロールを検知すると、
A, B それぞれの translateY の値が変わっていき同時に上部へ移動します。
Aはブラウザ表示領域の上部に隠れ、Bはブラウザ表示領域に現れてきます。

CSS Transformについて 参考

JSでのスクロール検出について 参考

Comments

[minicar]

ご回答ありがとうございます。

CSS の transformまわりは実装できそうなのですが、スクロールの分岐処理で苦戦しています。

・A上で上にスクロールしたときの処理
・A上で下にスクロールしたときの処理
・B上で上にスクロールしたときの処理
・B上で下にスクロールしたときの処理

のような形になるのかな？と思ってトライしているのですが、Bが表示されているとき、画面の一番上にあるので上にスクロールできず、値が取得できなくて悩んでおります。

もし、なにかアドバイスをいただけますと幸いです。

[umeruma]

別の手段だと、
PCブラウザではホイールイベント、
[MDN ページ] https://developer.mozilla.org/ja/docs/Web/API/WheelEvent
スマホだと touchmoveイベント
[MDN ページ] https://developer.mozilla.org/ja/docs/Web/Events/touchmove
の監視で実現できるのではないでしょうか。

返答遅れましたが、ご参考まで。