CSSスクロールスナップの種類

CSSスクロールスナップ(縦)Y方

  
    HTML
    <div class="scroll-main-div">

      <div class="scroll-container">    /* 要素の開始位置でスナップ */
        <section class="scroll-section">
          <img class="scroll-img" src="../img/logo/scroll.jpg" alt="スクロール画像">
        </section>
      </div>
      <div class="scroll-container">   /* 要素の開始位置でスナップ */
        <section class="scroll-section">
          <img class="scroll-img" src="../img/logo/scroll1.jpg" alt="スクロール画像">
        </section>
      </div>
      <div class="scroll-container">    /* 要素の開始位置でスナップ */
        <section class="scroll-section">
          <img class="scroll-img" src="../img/logo/scroll2.jpg" alt="スクロール画像">
        </section>
      </div>

    </div>

    CSS
    /* スクロールスナップのメインコンテナ */
    .scroll-main-div {
      scroll-snap-type: y mandatory; /* Y軸方向の強制的なスクロールスナップを有効化 */
      overflow-y: scroll; /* 縦スクロールを可能にする */
      height: 100vh; /* ビューポートの高さに設定 */
    }

    /* 各スクロールセクションのコンテナ */
    .scroll-container {
      scroll-snap-align: start; /* 要素の開始位置でスナップ */
      height: 100vh; /* 各セクションを画面の高さに設定 */
    }

    /* スクロールセクション内のコンテンツエリア */
    .scroll-section {
      width: 100%; /* 幅を100%に設定 */
      height: 100%; /* 高さを100%に設定 */
    }

    /* スクロール表示される画像 */
    .scroll-img {
      width: 100%; /* 幅を100%に設定 */
      height: 100%; /* 高さを100%に設定 */
      object-fit: cover; /* 画像のアスペクト比を保持しつつ要素全体を覆う */
      object-position: center; /* 画像の中央部分を表示 */
    }
  

CSSスクロールスナップ(横)X方向

  
  HTML
  <div class="X-scroll-main-div">
    <div class="X-scroll-container">    /* 要素の開始位置でスナップ */
      <section class="X-scroll-section">
        <img class="X-scroll-img" src="../img/logo/scroll.jpg" alt="スクロール画像">
      </section>
    </div>
    <div class="X-scroll-container">    /* 要素の開始位置でスナップ */
      <section class="X-scroll-section">
        <img class="X-scroll-img" src="../img/logo/scroll1.jpg" alt="スクロール画像">
      </section>
    </div>
    <div class="X-scroll-container">    /* 要素の開始位置でスナップ */
      <section class="X-scroll-section">
        <img class="X-scroll-img" src="../img/logo/scroll2.jpg" alt="スクロール画像">
      </section>
    </div>
  </div>
  
  CSS
  .X-scroll-main-div {
    scroll-snap-type: x mandatory; /* X軸方向の強制的なスクロールスナップを有効化 */
    overflow-x: scroll; /* 横スクロールを可能にする */
    overflow-y: hidden; /* 縦スクロールを無効にする */
    width: 100%; /* 各セクションを画面の幅に設定 */
    height: 100vh; /* ビューポートの高さに設定 */
    display: flex; /* フレックスボックスを使用して横並びにする */
    justify-content: flex-start; /* コンテンツを左端から開始 */
    align-items: center; /* コンテンツを垂直方向に中央に配置 */
    scroll-behavior: smooth; /* スムーズなスクロール動作 */
  }

  /* 各横スクロールセクションのコンテナ */
  .X-scroll-container {
    scroll-snap-align: start; /* 要素の開始位置でスナップ */
    width: 100%; /* 各セクションを画面の幅に設定 */
    height: 100vh; /* 各セクションを画面の高さに設定 */
    flex-shrink: 0; /* コンテナが縮小されないようにする */
    display: flex; /* フレックスボックスを使用 */
    justify-content: center; /* 水平方向に中央配置 */
    align-items: center; /* 垂直方向に中央配置 */
  }

  /* 横スクロールセクション内のコンテンツエリア */
  .X-scroll-section {
    width: 100%; /* 幅を100%に設定 */
    height: 100%; /* 高さを100%に設定 */
  }  

  /* 横スクロール表示される画像 */
  .X-scroll-img {
    width: 100%; /* 幅を100%に設定 */
    height: 100%; /* 高さを100%に設定 */
    object-fit: cover; /* 画像のアスペクト比を保持しつつ要素全体を覆う */
    object-position: center; /* 画像の中央部分を表示 */
  }
  

CSSスムーズスクロール

  
    CSS
    
    /* スムーズスクロールを有効化 */
    html {
      scroll-behavior: smooth; /* スムーズスクロールを有効化 */
    }