Auto scroll page - with controls

Prototyping a thing I want to make that I can inject into any page and apply auto scrolling feature.

by Ea Bangalore

HTML

<p></p>
<div id="wrapper">
    <div id="controls">
        <div id="up">+</div>	<span id="speed">100</span>px / s
        <div id="down">-</div>
    </div>
</div>

CSS

p {
		height: 5000px;
		background: red;
		width: 50px;
		border: 10px dashed #000;
	}

	div#wrapper {
		position: fixed;
		top: 10px;
		right: 10px;
		-webkit-user-select: none;
	}

	div#controls {
		position: relative;
		width: 60px;
		height: 150px;
		line-height: 150px;
		text-align: center;
		border: 3px solid #ccc;
		border-radius: 30px;
		cursor: default;
		font-family: sans-serif;
		font-size: 11px;
      color: #888;
	}

	div#up, div#down {
		width: 50px;
		height: 50px;
		padding: 0;
		margin: 0;
		line-height: 50px;
		left: 50%;
		border-radius: 25px;
		position: absolute;
		-webkit-transform: translateX(-50%);

		box-shadow: 1px 2px 10px #ccc;
		color: #fff;

		text-align: center;
		font-size: 30px;
		font-family: arial;
		cursor: pointer;
	}

	div#up {
		top: 5px;
		background: rgba(75, 100, 250, .5);
	}
	div#up:hover {
		background: rgba(75, 100, 250, .7);
	}

	div#down {
		bottom: 5px;
		background: rgba(250, 100, 75, .5);
	}
	div#down:hover {
		background: rgba(250, 100, 75, .7);
	}

JavaScript

(function () {
var d = document;
var lastFrame = null;
var speed = 100;
var modifier = 25;

var x = window.scrollX;
var y = window.scrollY;
var maxY = document.height - window.innerHeight;
var maxX = document.width - window.innerWidth;

var elms = {
    speed: d.getElementById('speed'),
    up: d.getElementById('up'),
    down: d.getElementById('down')
};

// Add event listeners    
var listen = function (elm, event, cb) {
    return elm.addEventListener(event, function () {
        cb.apply(this, arguments);
        
        elms.speed.innerText = speed;
    }, false);
};
listen(elms.up, 'click', function (e) {
    speed += modifier;
});
listen(elms.down, 'click', function (e) {
    speed -= modifier;
});

lastFrame = Date.now(); // Snapshot right before loop starts

(function scroller() {
    requestAnimationFrame(scroller);
    
    var now = Date.now();
    var dt = (now - lastFrame) / 1000;
    lastFrame = now;
    
    y += speed * dt;
    
    y = y < 0 ? 0 : y;
    y = y > maxY ? maxY : y;
    
    window.scrollTo(x, y);
}());
}());