CSS | scroll-snapでピタッと止まるスナップスクロールを実装する

CSS デザイン,CSS

CSS | scroll-snapでピタッと止まるスナップスクロールを実装する

CSSのscroll-snap-typeプロパティを利用してスクロール操作時に要素の境界でピタッと止まるスナップスクロールを実装する方法のサンプルコードです。

See the Pen CSS | scroll-snap-type: y mandatory by yochans (@yochans) on CodePen.

スナップスクロールを実装する

親となる全体の要素にはscroll-snap-typeプロパティで「y mandatory」を指定します。
機能させるにはoverflowプロパティで「scroll」の指定と、必要なコンテンツの高さが必要です。

.container{
	width: 100%;
	height: 100vh;
	scroll-snap-type: y mandatory;
	overflow: scroll;
}

一度に表示する領域のボックスにはscroll-snap-alignプロパティで「start」を指定します。
必要なコンテンツの高さが必要です。

.container div{
	height: 100vh;
	scroll-snap-align: start;
}

scroll-snapが効かない原因

scroll-snapが効かない場合の原因には以下のことが考えられます。

  • body要素ではscroll-snapが効きません
  • 表示領域の高さが指定されていない

scroll-snapの動作がかくつく原因

scroll-snap-typeで「mandatory」や「proximity」を指定した場合の挙動として「現在スクロール中でなければスナップ点に合わせられます。」と説明があります。

この説明通り、スクロール操作が終了した時に機能する仕組みで、どうしても一瞬スルロールがかくついてしまうようです。

この解決策は不明、見つかりませんでした。

個人的にもこのカクツキは結構気になる部分ではありますので、同様の機能が必要な際には、scroll-snapは利用せずJavaScriptなどで実装することになりそうです。

CSS デザイン,CSS

Posted by Yousuke.U