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

メインサイト(親要素)の上にフルスクリーンの画像(子要素)を配置。
子要素をスクリーンさせるているときは、親要素のスクリーンを停止させ、
子要素が画面から消えたら、親要素のスクリーンが開始する。

上記のような動きにしたいのですが、
なにか良い方法はありませんでしょうか？
何卒よろしくお願い致します。

下記サイトに行きついたのですが、
どう使用していいか困っております。
https://blog.mono0x.net/2012/03/29/javascript-scroll/

JavaScript
1var scrollTop;
2
3scrollTop = $(window).scrollTop();
4$('body').addClass('noscroll').css('top', (-scrollTop) + 'px');
5
6$('body').removeClass('noscroll');
7$(window).scrollTop(scrollTop);

css
1body {
2  width: 100%;
3}
4
5body.noscroll {
6  position: fixed;
7  overflow-y: scroll;
8}

Lhankor_Mhy

2020/06/10 09:00

「パララックス」で検索はされましたでしょうか？

Lhankor_Mhy

2020/06/10 09:01

と、思ったけど、参考サイトは全然パララックスではなかったですね。失礼しました。

Lhankor_Mhy

2020/06/10 09:15

参考サイトで言うと、「子要素」とはどの部分ですか？「HOT TOPICS」などと書かれている部分ですか？そうだとすると「親要素」とはヘッダなどのこと、と理解していいですか？

takumaro

2020/06/10 09:58

ご教授ありがとうございますm(__)m パララックスでやってみたのですがピタッと止まらず悪戦苦闘しております。素人同然の知識で申し訳ございません。親要素がロゴを含めた「HOT TOPICS」と書かれたサイトメイン部分です。子要素がフルスクリーンで最初に出てくる富士山の画像部分になります。 Cookieで一度しか表示されないようです。どうかご教授お願いいたしますm(__)m

Lhankor_Mhy

2020/06/10 10:11 編集

あれ？前に一度訪問したのかな？と思ったら、この質問と重複しているのですね。なるほど。 https://teratail.com/questions/268288 削除リクエストが通ってから回答した方がよさそうですね。

takumaro

2020/06/10 10:20

申し訳ございません。まだ不慣れなものでm(__)m 削除リクエストが通ってからで構いません！ぜひご教授お願いいたしますm(__)m

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

回答2件

ベストアンサー

とりあえず、作ってみました。
サンプル

js
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}

CSSで、スクリーン一杯にカバー画像を広げ、メインコンテンツをfixedにした上でz-indexで背面に回します。
JavaScriptのIntersectionObserverで、カバー画像がスクロールで消えるタイミングを捕捉し、メインコンテンツのfixedを解除する、という仕組みです。

ご提示いただいたサイトもだいたい同じ仕組みで作られています。

参考：
Intersection Observer API - Web API | MDN

ただ実際には、慣性スクロールとパララックスのプラグインを使った方がきれいに仕上がるんじゃないかと思いますよ。

投稿2020/06/11 02:39

Lhankor_Mhy

総合スコア36960

takumaro

2020/06/11 03:43

なんてお礼を申し上げたらいいのか分かりませんm(__)m ご教授いただき本当に本当にありがとうございます！！深く感謝申し上げます。私自身ももっと精進して参ります！この度は本当にありがとうございましたm(__)m 頼ってばかりではダメですが、またなにかあったときはどうぞよろしくお願いします！

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

PCとAndroidでは（ぶっちゃけIEは知らないですが）、モーダル表示中だけbodyにoverflow: hidden;をつければいいです。
Iosでは、これだとうまくいかないので、両端でスクロールイベントをキャンセルしてしまいます。
document.addEventListener('touchmove', function(e) {e.preventDefault();}, {passive: false});

これだけだとスクロールが完全にできなくなってしまうので、ちょっとだけ揺り戻してすぐに解除します。1pxほど逆側にスクロールしてからスクロールイベントを復活などが考えられます

投稿2020/06/10 09:19