Skip to content

Instantly share code, notes, and snippets.

@msimpson msimpson/scroll-test.html
Last active Jan 26, 2018

Embed
What would you like to do?
Mac OSX Inertial Scrolling Buffer (http://jsfiddle.net/n7bk6pb9/1/)
<!doctype html>
<html>
<head>
<title>Scroll Test</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(function() {
var canvas = $('canvas'),
ctx = canvas[0].getContext("2d"),
deltas = [null, null, null, null, null, null, null, null, null],
lastPeak = 0,
center = null,
x = 0;
function resize() {
ctx.canvas.width = $(window).innerWidth();
ctx.canvas.height = $(window).innerHeight();
center = Math.floor(ctx.canvas.height / 2);
clear();
guides();
}
function clear() {
x = 0;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function guides() {
ctx.fillStyle = '#000';
ctx.fillRect(0, center, ctx.canvas.width, 1);
ctx.fillStyle = '#0f0';
ctx.fillRect(0, center - 60, ctx.canvas.width, 1);
ctx.fillRect(0, center + 60, ctx.canvas.width, 1);
}
function hash() {
ctx.fillStyle = '#00f';
ctx.fillRect(x, center + 10, 1, -20);
}
function hasPeak() {
if (deltas[0] == null) return false;
var flat = [];
for (var i in deltas) {
flat.push(Math.abs(deltas[i]));
}
if (
Math.abs(x - lastPeak) > 10 &&
flat[0] < flat[4] &&
flat[1] <= flat[4] &&
flat[2] <= flat[4] &&
flat[3] <= flat[4] &&
flat[5] <= flat[4] &&
flat[6] <= flat[4] &&
flat[7] <= flat[4] &&
flat[8] < flat[4]
) {
lastPeak = x;
return true;
}
return false;
}
resize();
guides();
$(window)
.on('resize', resize)
.on('mousewheel DOMMouseScroll', function(e) {
var delta = e.type == 'mousewheel' ? e.originalEvent.wheelDelta * -1 : 40 * e.originalEvent.detail;
if (hasPeak()) hash();
else if ((deltas[8] == null || Math.abs(deltas[8]) == 120) && Math.abs(delta) == 120) hash();
ctx.fillStyle = '#f00';
ctx.fillRect(x, center, 1, delta * -1);
guides();
deltas.shift();
deltas.push(delta);
x++
if (x > ctx.canvas.width) clear();
});
});
</script>
</head>
<body>
<canvas></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.