Vanilla ScrollBar

JsScrollBar.js

var isInt = function(n) {
	return n % 1 === 0;
},
    isFloat = function(n) {
	return n === Number(n) && n % 1 !== 0;
};

function isFunction(functionToCheck) {
	var getType = {};
	return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
}

function ScrollBar() {}

/**
 * Copyright (c) 2015 Valnet Inc.
 */
ScrollBar.prototype = {

	/**
	 * ScrollBar.set
	 *
	 * @param {Element} bar
	 * @param {Element} knob
	 * @param {String} dir Direction horizontal or vertical.
	 *
	 * @return {Void}
	 */
	set: function(bar, knob, dir, callbackMove, callbackHold, callbackUp) {
		this.bar = bar;
		this.knob = knob;
		this.dir = dir;

		this.barWidth = barWidth = parseInt(window.getComputedStyle(bar).width);
		this.barHeight = barHeight = parseInt(window.getComputedStyle(bar).height);
		this.knobWidth = knobWidth = parseInt(window.getComputedStyle(knob).width);
		this.knobHeight = knobHeight = parseInt(window.getComputedStyle(knob).height);

		if(dir === 'horizontal') {
			this.slidingSpace = barWidth - knobWidth;
		} else if (dir === 'vertical') {
			this.slidingSpace = barHeight - knobWidth;
		}

		this.diffX = NaN;
		this.diffY = NaN;

		this.knobPos = NaN;
		this.knobHold = false;

		this.callbackMove = (isFunction(callbackMove))?callbackMove:function(){};
		this.callbackHold = (isFunction(callbackHold))?callbackHold:function(){};
		this.callbackUp = (isFunction(callbackUp))?callbackUp:function(){};

		var self = this;

		/*this.knob.onmousedown = function(e) {
			self._mouseDown(e);
		};*/

		this.knob.addEventListener('mousedown', function(e) {
			self._mouseDown(e);
		}, false);

		/*document.onmouseup = function(e) {
			self._mouseUp(e);
		};*/

		document.addEventListener('mouseup', function(e) {
			self._mouseUp(e);
		}, false);

		/*document.onmousemove = function(e) {

			self._mouseMove(e);
		};*/

		document.addEventListener('mousemove', function(e) {
			self._mouseMove(e);
		}, false);

		/*this.bar.onmousewheel = function(e) {
			var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
			self._mouseMove(e, delta);
		};*/

		this.bar.addEventListener('mousewheel', function(e) {
			var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
			self._mouseMove(e, delta);
		}, false);

	},

	_mouseDown: function(e) {
		this.knobHold = true;
		this.diffX = e.clientX - parseInt(this.knob.offsetLeft);
		this.diffY = Math.abs(e.clientY - (parseInt(this.bar.offsetTop) - parseInt(this.knob.offsetTop)));
		this.callbackHold(e);
	},

	_mouseUp: function(e) {
		this.knobHold = false;
		this.callbackUp(e);
	},

	_mouseMove: function(e, delta) {
		if(this.knobHold || isInt(delta)) {
			if(isInt(delta)) {
				var marginLeft = parseInt(this.knob.style.marginLeft),
				    marginLeft = isNaN(marginLeft)?0:marginLeft,
				    marginTop = parseInt(this.knob.style.marginTop),
				    marginTop = isNaN(marginTop)?0:marginTop,
				    x = marginLeft - delta,
				    y = marginTop + delta;
			} else {
				var x = parseInt(e.clientX - this.diffX),
				    y = parseInt(e.clientY - this.diffY);
			}

			var percentage = NaN;

			if(this.dir === 'horizontal') {
				if(x < this.slidingSpace && x > 0) {
					this.knob.style.marginLeft =  x + 'px';
					percentage = (x / this.slidingSpace) * 100;
				} else if(x > this.slidingSpace) {
					this.knob.style.marginLeft = this.slidingSpace + 'px';
					percentage = 100;
				} else if(x <= 0) {
					this.knob.style.marginLeft = '0px';
					percentage = 0;
				}
			} else if (this.dir === 'vertical') {
				if(y < this.slidingSpace && y > 0) {
					this.knob.style.marginTop =  y + 'px';
					percentage = (y / this.slidingSpace) * 100;
				} else if(y > this.slidingSpace) {
					this.knob.style.marginTop = this.slidingSpace + 'px';
					percentage = 100;
				} else if(y <= 0) {
					this.knob.style.marginTop = '0px';
					percentage = 0;
				}
			}
			this.callbackMove(e, percentage, [x, y]);
		}
	},

};