非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

CSS：マウススクロールで指定位置で停止する（スクロールスナップ）

   

HTMLでマウススクロールした際に指定位置でピタッと止めるスクロールスナップ（scroll-snap）という仕組みがあります。

その様子を以下のように動画にしました。縦方向にスライドさせると各ページで停止していることがわかるかと思います。

 

HTML/CSSのソースはこちら。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    margin: 0;
  }
  .container {
    overflow: auto;
    scroll-snap-type: y mandatory; /*縦方向スクロール*/
    height: 100vh; /*画面を縦にいっぱいに広げる*/
  }
  section{
    height: 100vh; /*画面を縦にいっぱいに広げる*/
    scroll-snap-align: start;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .page1{
    background-color: azure;
    text-align: center;
  }
  .page2{
    background-color:greenyellow;
    text-align: center;
  }
  .page3{
    background-color:aqua;
    text-align: center;
  }
  .title{
    font-size: 7rem;
  }
</style>
<title>Scroll Test</title>
</head>
<body>

<div class="container">
  <section class="page1">
    <h1 class="title">Page-1</h1>
    <p>Page1</p>
  </section>

  <section class="page2">
    <h1 class="title">Page-2</h1>
    <p>Page2</p>
  </section>

  <section class="page3">
    <h1 class="title">Page-3</h1>
    <p>Page3</p>
  </section>

</div>

</body>
</html>

 

スポンサーリンク

 - HTML/JavaScript