フルスクリーンの画像をパララックスのようにスクロールさせたい

フルスクリーンの画像をスクロール終了する一歩手前で
シュッとパララックスのようにスクロールさせたいです。

Lhankor_Mhy さまに別件でご教授いただき
その件は無事解決させていただきました。本当にありがとうございますm(__)m

Lhankor_Mhy さまに別件でご教授いただいた状態から
(JavaScriptで一時的にスクロールを無効化している状態から)
その後フルスクリーンの画像だけシュッとパララックスのようにスクロールさせたくいろいろと試したのですが、
どうにもこうにもうまくいきません。
どうやってもフルスクリーンの画像とメインサイトがつながってしまいます。泣

私が素人なだけで大変申し訳ないのですが
上記のような動きにどうにかしたいです！
なにか良い方法はございませんでしょうか？
何卒ご教授の程どうかよろしくお願い致しますm(__)m

以下別件でLhankor_Mhy さまにご教授いただいた
ソースになります。

Lhankor_Mhyさまに教えていただいたサンプル

javascript
1const observer = new IntersectionObserver(
2    e => e[0].isIntersecting ?
3        document.body.classList.add('isCovered') :
4        document.body.classList.remove('isCovered')  
5);
6observer.observe(document.querySelector('header img'));

css
1.isCovered .main{
2  position: fixed;
3  z-index: -1;
4  top: 0;
5}
6
7header{
8  display: flex;
9  width: 100%;
10  flex-flow: column;
11}
12
13.isCovered header::after{
14  content: "";
15  display: block;
16  width: 0;
17  height: 120vh;
18}
19
20header img{
21  height: 100vh;
22  flex: 1 1 auto;
23  object-fit: cover;
24}

行動規範の内容に同意します

回答1件

ベストアンサー

「シュッとパララックスのようにスクロール」というのがどういう振る舞いなのか今一つわからないのですが、こういうことですか？

サンプル

css
1/* 追加ここから */
2html{
3  scroll-snap-type: y mandatory;
4  scroll-behavior: smooth;
5}
6.isCovered header img{
7  scroll-snap-align: center;
8}
9/* 追加ここまで */
10
11.isCovered header::after{
12  scroll-snap-align: end; /* 追加 */
13  content: "";
14  display: block;
15  width: 0;
16  height: 120vh;
17}