スクロールがピタッと止まる
感動してしまったので、備忘録的な感じでメモ。
cssでできるんだね、jsとか必要だと思っていたけど、cssのscroll-snap-typeを使えばOK
HTML
<div class="container">
<section class="area">
<h2>ここでとまる</h2>
<p>1</p>
</section>
<section class="area">
<h2>ここでとまる</h2>
<p>2</p>
</section>
<section class="area">
<h2>ここでとまる</h2>
<p>3</p>
</section>
<section class="area">
<h2>ここでとまる</h2>
<p>4</p>
</section>
<section class="area">
<h2>ここでとまる</h2>
<p>5</p>
</section>
</div>
css
.container {
overflow: auto;
scroll-snap-type: y mandatory;
height: 100vh;
}
.area {
scroll-snap-align: start;
height: 100vh;
}
body {
font-size: 4rem;
text-align: center;
color: #fff;
}
h2 {
font-size: 2rem;
margin-bottom: 2rem;
}
.area:nth-child(even) {
background-color: #0db;
}
.area:nth-child(odd) {
background-color: #0bd;
}
縦の時は方向をｙにしたらいいけど、スライダーとかで横にスクロールするときはscroll-snap-typeを 「x」にするだけ。
めちゃ便利！
今まで調べようともしていなかったので、気持ち悪いところで止まってしまっても仕方ないと思っていたけど、これ意外と知ってるだけで細かいところきれいな装飾できるかも。