类似fullpage的单全屏滚动

单页/全屏滚动页面越来越常见了，它多用于产品介绍、招聘等内容较少的简单页面。
针对这种效果也出现了不少 jQuery 插件。
本文实现的效果类似于fullpage的单屏滚动，使用原生JS实现，不依赖任何js库。

HTML代码

<div style="background:#FEE;">1</div>
<div style="background:#EFE;">2</div>
<div style="background:#EEF;">3</div>
<div style="background:red;">4</div>

CSS代码

html,body {height:100%;}
body {margin:0px;overflow: hidden;}
div {height:100%;}

JavaScript代码

document.addEventListener("DOMContentLoaded", function() {
	var body = document.body,
	html = document.documentElement;
	var itv, height = document.body.offsetHeight;
	var page = scrollTop() / height | 0;
	//窗口大小改变事件
	addEventListener("resize", onresize, false);
	onresize();
	//滚轮事件
	document.body.addEventListener("onwheel" in document ? "wheel" : "mousewheel",
		function(e) {
			clearTimeout(itv);
			itv = setTimeout(function() {
				var delta = e.wheelDelta / 120 || -e.deltaY / 3;
				page -= delta;
				var max = (document.body.scrollHeight / height | 0) - 1;
				if (page < 0) return page = 0;
				if (page > max) return page = max;
				move();
			}, 100);
			e.preventDefault();
		}
	);
	//平滑滚动
	function move() {
		var value = height * page;
		var diff = scrollTop() - value;
		(function callee() {
			diff = diff / 1.2 | 0;
			scrollTop(value + diff);
			if (diff) itv = setTimeout(callee, 16);
		})();
	};
	//resize事件
	function onresize() {
		height = body.offsetHeight;
		move();
	};
	//获取或设置scrollTop
	function scrollTop(v) {
		if (v == null) return Math.max(body.scrollTop, html.scrollTop);
		else body.scrollTop = html.scrollTop = v;
	};
});

展示效果