固定背景の画像を利用したscroll-snapを取り入れるやり方(html,css)

Question

ここ最近、外出自粛によりHTMLとCSSを学んでおります。

下記のようなcodepenページにあるスクロールをしながら<固定背景(cssでbackground-image配置)>と<スクロールコンテンツ 説明文+説明画像(html)>を交互に表示し、イラストを紹介するページを作成しようと思ってまして。
https://codepen.io/w_s-ta/pen/vWRBYg

下記のように、もしスナップする機能もつけられたら便利かと思い調べておりました。
scroll-snap　を利用した参考codepen
https://codepen.io/kobayashiyuka/pen/exrqPK

ですが、スナップせず思うように中々出来ません。
また参考になるようなページもみつからず、時間を費やす一方です。
もしよければ詳しい方にお訪ね出来ればと思っております。

正解がわかる方、誘導して頂けるとありがたいです。
どうかよろしくお願い致します。

  <div class="container">
  <!-- 1 -->
  <section class='child'>
    <div class="fixed-bg bg-1">
      <h1 class="main-text">タイトル</h1>
      <p class="sub-text">文</p>
    </div>
    <div class="fixed-bg bg-1-1">
      <div class="text-box">
        <h2>タイトル</h2>
        <p></p>
        <img style="-webkit-user-select: none;" src="https://">
        <p>
          説明文
        </p>
      </div>
    </div>
  </section>
  <!-- 2 -->
  <!-- 3 -->
</div>

.fixed-bg {
  height:100vh;
}

.container/*親要素 */ {
  scroll-snap-type: y mandatory;/* scroll-snap */
}

.child/*子要素 */ {
  scroll-snap-align: start;/* scroll-snap */
}

/* 背景画像 */
.bg-1 {
  margin-top:-10px;
  background-image: url("../img/sample1.png");
  background-size:  contain;
  height:100vh;
}
.bg-2{

Comments

[退会済みユーザー]

試しているコードがあるのでしたら、それも書いていただけますか？
文章だけでは現状と期待している挙動を把握するのは難しいです。

[syosin2020]

早速ご返事ありがとうございます。
コードを追加してみましたが、こちらでいかがでしょうか。
わかりましたら宜しくお願い致します。

Answer 1

.container{
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow: scroll;
  scrollbar-width: none;  /* Firefox 対応 */
}
.container::-webkit-scrollbar {
  display: none; /* Chrome, Safari 対応 */
}

  <div class="container">
  <!-- 1 -->
  <section class='child'>
    <div class="fixed-bg bg-1">
      <h1 class="main-text">タイトル</h1>
      <p class="sub-text">文</p>
    </div>
  </section>  <!-- 追加 -->
  <section class='child'> <!-- 追加 -->
    <div class="fixed-bg bg-1-1">
      <div class="text-box">
        <h2>タイトル</h2>
        <p></p>
        <img style="-webkit-user-select: none;" src="https://">
        <p>
          説明文
        </p>
      </div>
    </div>
  </section>
  <!-- 2 -->
  <!-- 3 -->
</div>

Comments

[syosin2020]

ご返信頂いた内容を元に私の再現したいコードを念のため上記に貼りました。
ご覧頂きありがとうございました。

Answer 2

こうだと思います。

.container/*親要素 */ {
    scroll-snap-type: y mandatory;/* scroll-snap */
    height: 100vh; /* ←追加 */
    overflow: scroll; /* ←追加 */
}

Comments

[syosin2020]

ご返信ありがとうございました！
返信の内容を元に私の再現したいように調整も出来、無事に解決致しました。
助かりました。

[退会済みユーザー]

解決してよかったです^^