1画面分ずつスクロールするコンテンツ

1画面分ずつスクロールするコンテンツを作りました。
jQuery使用せず、javascriptとcssで作りました。

トラックパッドだと慣性スクロールが効いて変な動きになってしまうのですが、それにも対応しています。

デモ

ソースコードと解説

html

<div id="wrap">
	<div class="page1">1</div>
	<div class="page2">2</div>
	<div class="page3">3</div>
	<div class="page4">4</div>
	<div class="page5">5</div>
</div>

div#wrap の中の div をそれぞれ1画面ずつスクロールするようにしました。
この部分の指定を変える場合は、javascript の以下の部分を変更すればOKです。

elements = document.querySelectorAll('#wrap div'),

(‘#wrap div’) となっているところを変更ください。

css

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#wrap div {
	width: 100%;
	height: 100vh;
	line-height: 100vh;
	text-align: center;
	font-size: 30px;
}

.page1 { background-color: aqua; }
.page2 { background-color: antiquewhite; }
.page3 { background-color: tomato; }
.page4 { background-color: palegreen; }
.page5 { background-color: orange; }

body に overflow: hidden; を入れてスクロールバーは消しておきました。

#wrap div に width: 100%; height: 100vh; で画面いっぱいに。

javascript

(function () {
	'use strict';
	
	// 変数
	var wrap = document.getElementById('wrap'),
		elements = document.querySelectorAll('#wrap div'), // 1画面分スクロールさせる要素
		elRect = [], // 要素の位置情報を取得するための配列
		elTop = [], // 要素の位置を入れるための配列
		count = 0, // 
		wheelFlag = false;
	
	// 各要素の位置を取得
	function getElTop() {
		for (var i = 0; i < elements.length; i++) { // 要素の数ループ
			elRect.push(elements[i].getBoundingClientRect()); // 要素の位置情報を配列へ
		}
		for (var i = 0; i < elRect.length; i++) { // 要素の数ループ
			elTop.push(elRect[i].top + window.scrollY); // 要素の位置を配列へ
		}
	}
	getElTop();
	
	// 画面リサイズのときの処理
	window.addEventListener('resize', function () {
		elRect = []; // 位置情報の配列を一旦空に
		elTop = []; // 位置の配列を一旦空に
		getElTop(); // 位置を取得
		window.scrollTo(0, elTop[count]); // 現在表示中の画面位置へ
	});

	// マウスホイールのときの処理
	wrap.addEventListener('wheel', function (e) {
		e.preventDefault(); // デフォルトのスクロール動作を削除
		if (!wheelFlag) { // wheelFlagがfalseのときに発動
			wheelFlag = true; // wheelFlagをtrueにして無駄に発動しないように
			if (e.deltaY > 0) { // ホイールが下方向だったら
				if (count >= elements.length - 1) { // 要素の数以上に増えないようにcountが要素の数を超えたら
					count = elements.length - 1; // countを要素の数とする
				} else {
					count++; // それまではcountをプラス
				}
			} else if (e.deltaY < 0) { // ホイールが上方向だったら
				if (count <= 0) { // 0より小さくならないようにcountが0以下なら
					count = 0; // countを0とする
				} else {
					count--; // それまではcountをマイナスしていく
				}
			}
			setTimeout(function () { //0.8秒後にwheelFlagをfalseにして次のページめくれるように
				wheelFlag = false;
			},800);
			setTimeout(function () {
				window.scrollTo({ // count番目の要素へスクロール
					top: elTop[count],
					behavior: 'smooth',
				});
			},20); // スクロールまで時間差をつけて慣性スクロール対策
		}
	});
}());

下方向へのホイールがあったら、countをプラス。
上方向ならマイナス。
要素の位置を配列に入れておいて、count番目の要素の位置へ画面をスクロールさせます。

トラックパッドでは慣性スクロールが効いて変な動きになってしまっていたので、少し時間をずらしてスクロールが発動するようにして対策しています。

setTimeout(function () {
	window.scrollTo({ // count番目の要素へスクロール
		top: elTop[count],
		behavior: 'smooth',
	});
},20); // スクロールまで時間差をつけて慣性スクロール対策

IEではスクロールの behavior: ‘smooth’, が効かないのでまた別で対応してあげないといけません。