質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

javascriptで1画面ずつスクロールする動きを実装したい

suzu1234
suzu1234

総合スコア25

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

1クリップ

101閲覧

投稿2022/09/23 12:05

前提

以下のサイトを参考に1画面ずつスクロールする動きを実装しています。記載されているコードについてある程度理解することができたのですが、2点ほど調べてもわからない箇所があったため、お知恵をを拝借したく質問させていただきました。

参考ページ:https://mukuchi.work/wheelpage/
デモページ:https://mukuchi.work/demos/wheelPage/

該当のソースコード

<div id="wrap"> <div class="page1">1</div> <div class="page2">2</div> <div class="page3">3</div> <div class="page4">4</div> <div class="page5">5</div> </div>
body { margin: 0; padding: 0; overflow: hidden; } #wrap div { width: 100%; height: 100vh; line-height: 100vh; text-align: center; font-size: 30px; } .page1 { background-color: aqua; } .page2 { background-color: antiquewhite; } .page3 { background-color: tomato; } .page4 { background-color: palegreen; } .page5 { background-color: orange; }
(function () { 'use strict'; // 変数 var wrap = document.getElementById('wrap'), elements = document.querySelectorAll('#wrap div'), // 1画面分スクロールさせる要素 elRect = [], // 要素の位置情報を取得するための配列 elTop = [], // 要素の位置を入れるための配列 count = 0, // wheelFlag = false; // 各要素の位置を取得 function getElTop() { for (var i = 0; i < elements.length; i++) { // 要素の数ループ elRect.push(elements[i].getBoundingClientRect()); // 要素の位置情報を配列へ } for (var i = 0; i < elRect.length; i++) { // 要素の数ループ elTop.push(elRect[i].top + window.scrollY); // 要素の位置を配列へ } } getElTop(); // 画面リサイズのときの処理 window.addEventListener('resize', function () { elRect = []; // 位置情報の配列を一旦空に elTop = []; // 位置の配列を一旦空に getElTop(); // 位置を取得 window.scrollTo(0, elTop[count]); // 現在表示中の画面位置へ }); // マウスホイールのときの処理 wrap.addEventListener('wheel', function (e) { e.preventDefault(); // デフォルトのスクロール動作を削除 if (!wheelFlag) { // wheelFlagがfalseのときに発動 wheelFlag = true; // wheelFlagをtrueにして無駄に発動しないように if (e.deltaY > 0) { // ホイールが下方向だったら if (count >= elements.length - 1) { // 要素の数以上に増えないようにcountが要素の数を超えたら count = elements.length - 1; // countを要素の数とする } else { count++; // それまではcountをプラス } } else if (e.deltaY < 0) { // ホイールが上方向だったら if (count <= 0) { // 0より小さくならないようにcountが0以下なら count = 0; // countを0とする } else { count--; // それまではcountをマイナスしていく } } setTimeout(function () { //0.8秒後にwheelFlagをfalseにして次のページめくれるように wheelFlag = false; },800); setTimeout(function () { window.scrollTo({ // count番目の要素へスクロール top: elTop[count], behavior: 'smooth', }); },20); // スクロールまで時間差をつけて慣性スクロール対策 } }); }());

わからないこと

【1点目】
JSの18行目にあります以下のコードなのですが、window.scrollYを足しているのはなぜでしょう?試しにwindow.scrollYを消してみたところ正常に作動していたので、どういった意味があるのか教えていただきたいです。

「elTop.push(elRect[i].top + window.scrollY);」

【2点目】
10行目で「wheelFlag」にfalseを代入していると思うのですが、33行目の条件式が「!wheelFlag」となっているにもかかわず、説明には”falseのときに発動”となっています。10行目にfalseが代入されており!が付いているのでtrueでの発動ではないのでしょうか?
また、33行目の条件式が発火する理屈についても教えていただきたいです。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

suzu1234

2022/09/23 12:52

cssのみで実装できるのですね、、有益な情報をありがとうございます。ブクマさせていただきます。 ですが、後学のためにjsのコードを理解したいと思っております
hatena19

2022/09/23 13:10

私自身は必要ないと思ってますので、それについては他の回答者に譲りますが、 現在では、スクロール連動エフェクトにスクロールイベントを使うこと自体が時代遅れになってます。代わりに、Intersection Observerを使うことが推奨されてます。 JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA https://ics.media/entry/190902/ こちらを学習する方がより後学のためになると思います。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。