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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1490閲覧

cssのscroll-snapでスクロールの挙動がおかしくなる

Ryoma0305

総合スコア8

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/01/25 16:08

scroll-snapを使用してフルページスクロールのサイトを作成して、尚且つスクロール連動のフェードインアニメーションを実装しようとしているのですが、スクロールの挙動が変で困っています。
挙動の不具合は.section02の下までスクロールし終えてフェードインが完了した瞬間に何故か.section02のトップまで勝手に戻ってしまいます。これはマークアップの問題でしょうか?どなたか原因分かる方がいらっしゃったら教えていただきたいです。よろしくお願いします。

html

1<body class="l-wrapper" id="top"> 2 <main class="l-main fullpage" id="fullpage"> 3 <div class="js-box section js-heigh section01"></div> 4 <div class="section js-second-page section02" id="section02"> 5 <div class="u-sp-only"> 6 <div class="p-home__content"> 7 <div class="p-home__content-inner"> 8 <div class="p-home__content__img-wrap"> 9 <span class="p-home__content__img"><img alt="" src="/assets/img/home/home-background-img01.jpg"></span> 10 <div class="p-home__content__date-wrap"> 11 <p class="p-home__content__date"><img alt="" src="/assets/img/home/date01.png"></p><a class="p-home__content__sns" href=""><img alt="" src="/assets/img/home/ico-sns01.png"></a> 12 </div> 13 </div> 14 <p class="p-home__content__columns-item 15 p-home__content__columns-item01">ダミーテキストです。</p> 16 <div class="js-section02"> 17 <div class="p-home__content__columns"> 18 <a class="link-hover dflex" href=""> 19 <div class="p-home__content__columns-item 20 p-home__content__columns-item02"> 21 <div class="video"> 22 <div class="p-home__content__columns-item__heading"> 23 <span>PICK UP</span> <span>CONTENTS</span> 24 </div><video class="object-fit" id="js-video05" loop="" src="/assets/video/video02.mp4"></video> 25 </div> 26 <div class="p-home__content__columns-item__title-wrap"> 27 <div class="p-home__content__columns-item__title"><img alt="" src="/assets/img/home/content__colum_title01.png"></div> 28 <div class="p-home__content__columns-item__text-wrap"> 29 <p class="p-home__content__columns-item__text">この文章はダミーです。この文章はダミーです。記者にとって、記事を書く時間は1割くらいで、残りの9割</p> 30 <div class="p-home__content__columns__links"> 31 <p class="p-home__content__columns__link">OVERVIEW</p> 32 <p class="p-home__content__columns__link 33 more">MORE</p> 34 </div> 35 </div> 36 </div> 37 </div> 38 </a> 39 </div> 40 <div> 41 <div class="p-home__content__columns02" id="section03"> 42 <div class="p-home__content__columns-item p-home__content__columns-item03"> 43 <div> 44 <a class="link-hover dblock" href=""> 45 <div class="p-home__content__columns-img 46 video-parent"> 47 <video class="object-fit" id="js-video06" loop="" src="/assets/video/video03.mp4"></video> 48 </div> 49 <h2 class="p-home__content__columns__title"> 50 <img alt="" class="u-sp-only" src="/assets/img/home/columns-title01-sp.png"> 51 </h2> 52 <p class="p-home__content__columns__text">この文章はダミーです。この文章はダミーです。記者にとって、記事を書く時間は1割くらいで、残りの9割</p> 53 <div class="p-home__content__columns__links"> 54 <p class="p-home__content__columns__link">EVOLUTION</p> 55 <p class="p-home__content__columns__link 56 more">MORE</p> 57 </div> 58 </a> 59 </div> 60 <div> 61 <div class="p-home__content__columns__digital"> 62 <a class="link-hover dblock" href=""> 63 <h2 class="p-home__content__columns__digital-title"><img alt="" src="/assets/img/home/content__columns__digital.jpg"></h2> 64 <p class="p-home__content__columns__digital-link p-home__content__columns__link more">MORE</p> 65 </a> 66 </div> 67 </div> 68 </div> 69 <div class="p-home__content__columns-item 70 p-home__content__columns-item04"> 71 <div class="p-home__content__columns__keyword-wrap"> 72 <a class="link-hover dblock" href=""> 73 <h2 class="p-home__content__columns__keyword-title"><img alt="" src="/assets/img/home/content_colum_img_keyword.jpg"></h2> 74 <div class="p-home__content__columns__links"> 75 <p class="p-home__content__columns__link">KEYWORD</p> 76 <p class="p-home__content__columns__link 77 more">MORE</p> 78 </div> 79 </a> 80 </div> 81 <div class="p-home__content__columns__title-wrap"> 82 <a class="link-hover dblock" href=""> 83 <h2 class="p-home__content__columns__title"> 84 <img alt="" class="u-sp-only" src="/assets/img/home/columns-title02-sp.png"> 85 <span>マッチング</span> 86 </h2> 87 <p class="p-home__content__columns__link 88 more dinline">MORE</p> 89 <p class="p-home__content__columns__text">この文章はダミーです。この文章はダミーです。記者にとって、記事を書く時間</p> 90 </a> 91 </div> 92 <div class="p-home__content__columns__img-wrap"> 93 <a class="link-hover dblock" href=""> 94 <div class="p-home__content__columns__img"> 95 <video class="object-fit 96 video" id="js-video07" loop="" src="/assets/video/video04.mp4"></video> 97 </div> 98 </a> 99 </div> 100 </div> 101 </div> 102 </div> 103 </div> 104 </div> 105 </div> 106 <footer class="l-footer u-sp-only"> 107 <ul class="l-footer-nav"> 108 <li class="l-footer-nav__item"> 109 <a href="">メニュー1</a> 110 </li> 111 <li class="l-footer-nav__item"> 112 <a href="">メニュー2</a> 113 </li> 114 <li class="l-footer-nav__item"> 115 <a href="">メニュー3</a> 116 </li> 117 <li class="l-footer-nav__item"> 118 <a href="">メニュー4</a> 119 </li> 120 <li class="l-footer-nav__item"> 121 <a href="">メニュー5</a> 122 </li> 123 </ul> 124 <h2 class="l-footer-logo">YOMIURI<br> 125 RECRUITMENT</h2><a class="c-go-top u-sp-only" href="#firstPage" id="js-gotop">PAGETOP</a> 126 </footer> 127 </div> 128 </div> 129 </main>

sass

1.fullpage { 2 overflow: scroll; 3 scroll-snap-type: y mandatory; 4 scroll-snap-stop: always; 5 height: 100vh; 6 .section { 7 scroll-snap-align: start; 8 9 } 10 .section01 { 11 position: relative; 12 } 13 .section01 { 14 height: 100%; 15 } 16 17 .section02 { 18 scroll-margin-bottom: 300px; 19 } 20} 21 22.p-home__content__columns-img, 23.p-home__content__columns__keyword-wrap, 24.p-home__content__columns__digital, 25.p-home__content__columns__title-wrap, 26.p-home__content__columns__img-wrap { 27 opacity: 0; 28} 29 30#section03.js-show { 31 32 .p-home__content__columns-img { 33 animation: Slide-left 1.5s ease 1 forwards; 34 animation-delay: 1.5s; 35 } 36 .p-home__content__columns__keyword-wrap { 37 animation: Slide-right 1.5s ease 1 forwards; 38 animation-delay: 2s; 39 } 40 .p-home__content__columns__digital { 41 animation: Slide-left 1.5s ease 1 forwards; 42 animation-delay: 2s; 43 } 44 .p-home__content__columns__title-wrap, 45 .p-home__content__columns__img-wrap { 46 animation: Slide-right 1.5s ease 1 forwards; 47 animation-delay: 2.5s; 48 } 49}

JavaScript

1$(".fullpage").scroll(function () { 2 let scrollTop = $(".fullpage").scrollTop(); // スクロール上部の位置 3 let areaTop01 = $("#section02").offset().top; // 対象エリアの上部の位置 4 let areaTop02 = $("#section03").offset().top; // 対象エリアの上部の位置 5 //let areaBottom = areaTop + $(".l-footer").innerHeight(); // 対象エリアの下部の位置 6 if (scrollTop > areaTop01) { 7 $("#section02").addClass("js-show"); // スクロールが対象エリアに入った場合 8 } 9 10 if (scrollTop > areaTop02) { 11 $("#section03").addClass("js-show"); // スクロールが対象エリアに入った場合 12 } 13 });

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mattari_panda

2021/01/26 01:18

上記コードのみでは、再現しませんでした。 HTML内の要素は仕方がないと思うので必要であればCSSで高さを設定する、またCSSのキーフレームアニメーションを記述するなどをお願いします。
Lhankor_Mhy

2021/01/26 03:24

環境を教えてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問