Touch Screen Scroll Effect

by Arlina Fitriyani

HTML

<body>  
  <div class='post-body'>
    <h2 class='post-title'>Drag the content with your mouse</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dapibus eros eu felis varius auctor. Donec id elementum elit. In sed gravida nibh, vitae dapibus urna. Nullam et ipsum ultrices, pulvinar ligula quis, hendrerit ante.</p>
<p>Curabitur sit amet massa feugiat, commodo metus eu, gravida leo. Proin feugiat pulvinar interdum. Curabitur semper, odio id condimentum porttitor, quam ipsum tincidunt purus, sit amet tempus quam dui vel felis.</p><p>Sed hendrerit sodales ipsum nec adipiscing. Mauris ut sollicitudin leo.</p>
<p>In sed gravida nibh, vitae dapibus urna. Nullam et ipsum ultrices, pulvinar ligula quis, hendrerit ante.</p>
<p>Curabitur sit amet massa feugiat, commodo metus eu, gravida leo. Proin feugiat pulvinar interdum. Curabitur semper, odio id condimentum porttitor, quam ipsum tincidunt purus, sit amet tempus quam dui vel felis.</p>
<p>Sed hendrerit sodales ipsum nec adipiscing. Mauris ut sollicitudin leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dapibus eros eu felis varius auctor. Donec id elementum elit. </p>
<p>In dapibus eros eu felis varius auctor. Donec id elementum elit. In sed gravida nibh, vitae dapibus urna.</p><p>Nullam et ipsum ultrices, pulvinar ligula quis, hendrerit ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet massa feugiat, commodo metus eu, gravida leo. Proin feugiat pulvinar interdum.</p>
<p>Curabitur semper, odio id condimentum porttitor, quam ipsum tincidunt purus, sit amet tempus quam dui vel felis. Sed hendrerit sodales ipsum nec adipiscing. Mauris ut sollicitudin leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dapibus eros eu felis varius auctor. Donec id elementum elit. In sed gravida nibh, vitae dapibus urna. Nullam et ipsum ultrices, pulvinar ligula quis, hendrerit ante.</p>
<p>Curabitur sit amet massa feugiat, commodo metus eu, gravida...

CSS

body {
    background-color:#f9f9f9;
    font-size:16px
    color:#444;
}
.post-body h2{
    color:#e25633;
    text-align:center;
}
.post-body {
    max-width:680px;
    margin:20px auto;
    border:10px solid #f0f0f0;
    padding:15px 20px;
    background-color:#fff;
    color:#444;
}

JavaScript

function TouchScroll() {
	var instance = this;
    var Event = {
        CHANGE: 'change',
        COMPLETE: 'complete',
        ERROR: 'error',
        TOUCH_START: 'touchstart',
        TOUCH_MOVE: 'touchmove',
        TOUCH_END: 'touchend',
        MOUSE_DOWN: 'mousedown',
        MOUSE_MOVE: 'mousemove',
        MOUSE_UP: 'mouseup'
    };
	this.options = {
		'element': null
	};
	var drag = false;
	var startevent = {};
	var startpercentage = {};
	var axis = 'y';
	var target;
	this.load = function(data) {
		for (var item in data) {this.options[item] = data[item];}
		addListeners();
		setupAnimation();
	}
	function setupAnimation() {
		window.requestAnimFrame = (function() {
			return  window.requestAnimationFrame       || 
			window.webkitRequestAnimationFrame || 
			window.mozRequestAnimationFrame    || 
			window.oRequestAnimationFrame      || 
			window.msRequestAnimationFrame     || 
			function(callback, element) {window.setTimeout(callback, 1000 / 60);};
		})();
	}
	function addListeners() {
		if (instance.options.element.addEventListener) {
			instance.options.element.addEventListener(Event.MOUSE_DOWN, onTouchStart, false);
			instance.options.element.addEventListener(Event.MOUSE_MOVE, onTouchMove, false);
			instance.options.element.addEventListener(Event.MOUSE_UP, onTouchEnd, false);
			instance.options.element.addEventListener(Event.TOUCH_START, onTouchStart, false);
			instance.options.element.addEventListener(Event.TOUCH_MOVE, onTouchMove, false);
			instance.options.element.addEventListener(Event.TOUCH_END, onTouchEnd, false);
		}
	}
	function onTouchStart(e) {
		drag = true;
		target = instance.options.element || e.target;
		startevent = e;
		startpercentage = {x: (e.x/window.innerWidth)*100, y: (e.y/window.innerHeight)*100}
		//console.log('onTouchStart', e, target);
		e.preventDefault();
	}
	function onTouchMove(e) {
		if (drag == true) {
			var diffx = (startevent.pageX-e.pageX);
			var diffy = (startevent.pageY-e.pageY);
			target.scrollLeft...