CSSのscroll-snap-typeを使って親要素のスクロールバーのスクロール位置を子要素の上や左にスナップさせる

• ホーム
• Javascript,CSS,HTMLデザイン無料素材集
• CSSのscroll-snap-typeを使って親要素のスクロールバーのスクロール位置を子要素の上や左にスナップさせる

scroll-snap-type:y mandatory;(縦方向)を適用した例

以下の例では、親要素にscroll-snap-type:y mandatory;を設定し、 3つ目と6つ目の子要素にscroll-snap-align:end;を設定し、それ以外の子要素にscroll-snap-align:start;を設定しています。
親要素のスクロールバーをドラッグしてスクロールし、マウスを離すと、3つ目と6つ目の子要素の下端、又はそれ以外の子要素の上端にスクロールバーのスクロール位置がスナップします。

<div class="scroll-snap-v">
  <div>1つ目<br>scroll-snap-align:start;<br>上端スナップ</div>
  <div>2つ目<br>scroll-snap-align:start;<br>上端スナップ</div>
  <div>3つ目<br>scroll-snap-align:end;<br>下端スナップ</div>
  <div>4つ目<br>scroll-snap-align:start;<br>上端スナップ</div>
  <div>5つ目<br>scroll-snap-align:start;<br>上端スナップ</div>
  <div>6つ目<br>scroll-snap-align:end;<br>下端スナップ</div>
</div>
<style>
  .scroll-snap-v{
    scroll-snap-type:y mandatory;
    width:100%;
    height:50vh;
    overflow:auto;
  }
  .scroll-snap-v > div{
    box-sizing:border-box;
    margin:0;
    padding:10px;
    width:100%;
    height:60%;
  }
  /* 1つ目、4つ目のdiv */
  .scroll-snap-v > div:nth-of-type(3n+1){
    scroll-snap-align:start;
    background:#ccccff;
  }
  /* 2つ目、5つ目のdiv */
  .scroll-snap-v > div:nth-of-type(3n+2){
    scroll-snap-align:start;
    background:#ccffcc;
  }
  /* 3つ目、6つ目のdiv */
  .scroll-snap-v > div:nth-of-type(3n){
    scroll-snap-align:end;
    background:#ffcccc;
  }
</style>

scroll-snap-type:x mandatory;(横方向)を適用した例

以下の例では、親要素にscroll-snap-type:x mandatory;を設定し、 3つ目と6つ目の子要素にscroll-snap-align:end;を設定し、それ以外の子要素にscroll-snap-align:start;を設定しています。
親要素のスクロールバーをドラッグしてスクロールし、マウスを離すと、3つ目と6つ目の子要素の右端、又はそれ以外の子要素の左端にスクロールバーのスクロール位置がスナップします。

<div class="scroll-snap-h">
  <div>1つ目<br>scroll-snap-align:start;<br>左端スナップ</div>
  <div>2つ目<br>scroll-snap-align:start;<br>左端スナップ</div>
  <div>3つ目<br>scroll-snap-align:end;<br>右端スナップ</div>
  <div>4つ目<br>scroll-snap-align:start;<br>左端スナップ</div>
  <div>5つ目<br>scroll-snap-align:start;<br>左端スナップ</div>
  <div>6つ目<br>scroll-snap-align:end;<br>右端スナップ</div>
</div>
<style>
  .scroll-snap-h{
     scroll-snap-type:x mandatory;
     width:100%;
     height:50vh;
     overflow:scroll;
     white-space:nowrap;
     padding:0;
     font-size:0;
  }
  .scroll-snap-h > div{
    box-sizing:border-box;
    margin:0;
    padding:10px;
    border:1px solid #000;
    width:80%;
    height:100%;
    display:inline-block;
    font-size:12pt;
  }
  /* 1つ目、4つ目のdiv */
  .scroll-snap-h > div:nth-of-type(3n+1){
    scroll-snap-align:start;
    background:#ccffff;
   }
  /* 2つ目、5つ目のdiv */
  .scroll-snap-h > div:nth-of-type(3n+2){
    scroll-snap-align:start;
    background:#ffffcc;
  }
  /* 3つ目、6つ目のdiv */
  .scroll-snap-h > div:nth-of-type(3n){
    scroll-snap-align:end;
    background:#ffccff;
  }
</style>