ワンスクロールサイトとは、スクロール（スワイプ）毎にページがスライドするサイトです。

JavaScriptを利用して作成することが多いですが、今回はCSSのみでの対応方法を紹介します。

scroll-snap-typeを使用して実装していきます。

scroll-snap-typeはスクロール（スワイプ）時に任意のポジション（スナップポジション）にコンテンツを止める（スナップする）事が出来ます。

ただし、body要素にはscroll-snap-typeを指定する事はできないので、bodyには『overflow-y: hidden』を指定して、ブラウザのスクロールバーを非表示にします。

body {
	overflow-y: hidden;
}

body要素の代わりに全体を囲む要素（スクロールスナップコンテナ）に『overflow-y: auto』を指定します。

スクロールスナップコンテナにscroll-snap-typeを指定します。

yはy軸（垂直軸）方向のスクロールを指定しています。

mandatoryはスナップポジション毎にスナップする必要がある事を指定しています。

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

各ページにはscroll-snap-align、scroll-snap-stopを指定します。

scroll-snap-alignはスナップポジションを指定するプロパティ、scroll-snap-stopはスナップポジションでの停止を指定するプロパティです。

また、スクロールスナップコンテナと各ページの高さに『height: 100vh』を指定する事で、各ページが1画面のワンスクロールサイトが実装出来ます。

.section {
	height: 100vh;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

注意点

『scroll-snap-stop: always』はブラウザ？マウス？によっては大きくスクロールすると止まらない事もあるようです。

また、スクロールの動きや遅延の調整までは出来ないので、その辺りが気になるようであれば、JavaScriptを利用した方が良いかもしれません。

コード例

body {
	overflow-y: hidden;
}
.container {
	height: 100vh;
	overflow-y: auto;
	scroll-snap-type: y mandatory;
}
.section {
	height: 100vh;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

デモ

デモページ

CSS要素定義

scroll-snap-type

スクロールコンテナ（親要素）に指定します。body要素には指定できません。

スクロールスナップの軸

• x … x軸のスナップポジションにのみスナップ。
• y … y軸のスナップポジションにのみスナップ。
• block … block軸のスナップポジションにのみスナップ。
• inline … inline軸のスナップポジションにのみスナップ。
• both … 両方の軸のスナップポジションに単独でスナップ。

スクロールスナップの厳密さ

• none … スナップなし。
• mandatory … スクロール操作内にスナップポジションがある場合はスクロールの終了時にスナップする。
• proximity … ブラウザの裁量で、スクロールの終了時にスナップポジションにスナップすることがあります。

scroll-snap-align

スクロールコンテナの最も近い子要素に指定します。

• none … スナップポジションを定義しない。
• start … 開始点にスナップします。
• end … 終点にスナップします。
• center … 中心にスナップします。

scroll-snap-stop

scroll-snap-align 同様、子要素に指定します。

• normal … スナップポジションを通過してもよい。
• always … スナップポジションを通過してはならない。