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>
スポンサーリンク