scroll handling

by phloe

HTML

<div class="overflow">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in nisi ante. Nullam accumsan libero augue, vitae consectetur sem eleifend non. Nullam placerat, quam at auctor dignissim, nisi mauris viverra nisl, et ornare eros dolor ac urna. Curabitur dui sapien, elementum a fermentum quis, placerat id nisl. Mauris sollicitudin, enim vitae sodales varius, diam tellus facilisis turpis, quis sagittis nulla nisl sit amet felis. Quisque porta urna leo, consequat ultricies justo ornare et. Proin elementum elit elit, volutpat cursus neque euismod eget. Sed ut lobortis tortor.</p>

<p>Etiam tempus, risus et pretium commodo, libero dolor viverra metus, et imperdiet erat purus sed turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum eget tempor libero. Pellentesque scelerisque a elit non pharetra. Nulla a turpis mattis, feugiat justo ac, imperdiet dui. Integer quis scelerisque lorem, et finibus diam. In interdum facilisis risus sed fringilla. Sed maximus ipsum in urna viverra, cursus accumsan diam porttitor. Aenean ultrices massa enim. Suspendisse potenti. Sed ipsum mauris, pharetra quis commodo et, aliquam sed urna.</p>

<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam sed neque dictum, vestibulum massa et, laoreet nibh. Nulla porta ullamcorper nisi vitae suscipit. Sed ultrices dapibus lorem, et viverra neque ullamcorper sed. Vestibulum condimentum tincidunt fringilla. Etiam lacinia vestibulum metus eu dapibus. Vivamus sit amet sem leo. Nunc nisl ante, ullamcorper in consectetur vel, eleifend vitae justo. Nullam iaculis felis eu aliquet placerat.</p>

<p>Nam vestibulum tincidunt purus et euismod. Praesent vitae mattis nisi. Donec volutpat elit eu sapien interdum egestas. Donec vel mauris consequat, eleifend est a, laoreet lectus. In sit amet purus suscipit, dapibus mauris at, faucibus diam. Praesent aliquet laoreet turpis eu ultrices....

JavaScript

var scrollY = window.scrollY;
window.addEventListener("wheel", function (e) {
	e.preventDefault();
	window.scroll(0, window.scrollY + (e.deltaY / 10));
	console.log("wheel", e);
});
window.addEventListener("touchmove", function (e) {
	e.preventDefault();
	console.log("touchmove", e);
});

// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {38: -1, 40: 1, 32: 2, 33: -2, 34: 2, 35: 3, 36: 0};

window.addEventListener("keydown", function (e) {
	if (e.keyCode in keys) {
		e.preventDefault();
		console.log("keydown", keys[e.keyCode]);
	}
});