JavaScriptで一時的にスクロールを無効化する

Question

メインサイト(親要素)の上にフルスクリーンの画像(子要素)を配置。
子要素をスクリーンさせるているときは、親要素のスクリーンを停止させ、
子要素が画面から消えたら、親要素のスクリーンが開始する。

動き参考サイト
[https://www.onestory-media.jp/](https://www.onestory-media.jp/)

上記のような動きにしたいのですが、
なにか良い方法はありませんでしょうか？
何卒よろしくお願い致します。

下記サイトに行きついたのですが、
どう使用していいか困っております。
[https://blog.mono0x.net/2012/03/29/javascript-scroll/](https://blog.mono0x.net/2012/03/29/javascript-scroll/)


```JavaScript
var scrollTop;

scrollTop = $(window).scrollTop();
$('body').addClass('noscroll').css('top', (-scrollTop) + 'px');

$('body').removeClass('noscroll');
$(window).scrollTop(scrollTop);
```
```css
body {
  width: 100%;
}

body.noscroll {
  position: fixed;
  overflow-y: scroll;
}
```

Accepted Answer

とりあえず、作ってみました。
[サンプル](https://jsfiddle.net/Lhankor_Mhy/o9y28jpx/)

```js
const observer = new IntersectionObserver(
    e => e[0].isIntersecting ?
        document.body.classList.add('isCovered') :
        document.body.classList.remove('isCovered')  
);
observer.observe(document.querySelector('header img'));
```

```css
.isCovered .main{
  position: fixed;
  z-index: -1;
  top: 0;
}

header{
  display: flex;
  width: 100%;
  flex-flow: column;
}

.isCovered header::after{
  content: "";
  display: block;
  width: 0;
  height: 120vh;
}

header img{
  height: 100vh;
  flex: 1 1 auto;
  object-fit: cover;
}
```

CSSで、スクリーン一杯にカバー画像を広げ、メインコンテンツを`fixed`にした上で`z-index`で背面に回します。
JavaScriptのIntersectionObserverで、カバー画像がスクロールで消えるタイミングを捕捉し、メインコンテンツの`fixed`を解除する、という仕組みです。

ご提示いただいたサイトもだいたい同じ仕組みで作られています。

参考：
[Intersection Observer API - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API)

---

ただ実際には、慣性スクロールとパララックスのプラグインを使った方がきれいに仕上がるんじゃないかと思いますよ。

Answer

PCとAndroidでは（ぶっちゃけIEは知らないですが）、モーダル表示中だけbodyにoverflow: hidden;をつければいいです。
Iosでは、これだとうまくいかないので、両端でスクロールイベントをキャンセルしてしまいます。
document.addEventListener('touchmove', function(e) {e.preventDefault();}, {passive: false});

これだけだとスクロールが完全にできなくなってしまうので、ちょっとだけ揺り戻してすぐに解除します。1pxほど逆側にスクロールしてからスクロールイベントを復活などが考えられます

関連した質問