CSSで全画面スクロールする

youichiro

画面を縦スクロールしたときに全画面がスライドのように切り替わるように表示させる

CSSの scroll-snap-type というプロパティを使うとできる

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>full-page-scroll demo</title>
    <link rel="stylesheet" href="stylesheet.css">
 </head>
 <body>
   <main class="full-page-scroll">
     <section class="section yellow">
       <div class="content">section1</div>
     </section>
     <section class="section cyan">
       <div class="content">section2</div>
     </section>
     <section class="section orange">
       <div class="content">section3</div>
     </section>
   </main>
 </body>
</html>

stylesheet.css

html,
body {
  padding: 0;
  margin: 0;
}

.full-page-scroll {
  width: 100%;
  height: 100vh;
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.section {
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
}

.content {
  padding: 10%;
}

.yellow {
  background-color: yellow;
}

.cyan {
  background-color: cyan;
}

.orange {
  background-color: orange;
}

参考


この記事が気に入ったらサポートをしてみませんか？