Skip to content

Instantly share code, notes, and snippets.

@imdwit imdwit/source.scrollbar.js
Last active Aug 29, 2015

Embed
What would you like to do?
(function() {
var scale=Number((screen.width/window.innerWidth).toFixed(1)), cssWidth = 35 / scale;
function _scrollBar_(target) {
var option, value, that = this;
this.options = {
target: target || window
};
setTimeout(function() {
that.init();
}, 1000)
}
_scrollBar_.prototype = {
getDistance: function() {
var t = this.options.target;
//gets the number of pixels scrolled vertically of the target
return (t === window) ? window.scrollY : this.getTarget().scrollTop;
},
getHeight: function() {
var t = this.options.target, body = document.body, html = document.documentElement;
return (t === window) ? Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight) : this.getTarget().scrollHeight;
},
getTarget: function() {
var t = this.options.target;
console.log(t)
return (t === window) ? window : document.querySelector(t)
},
init: function() {
var that = this, viewPortHeight = window.innerHeight;
var range = document.createElement('input');
range.type = 'range';
range.min = viewPortHeight;
range.max = this.getHeight();
range.value = this.getHeight() - this.getDistance();
range.id = 'scrollBar';
range.step = 1;
document.body.appendChild(range);
range.onchange = function() {
that.scroll(this.max - this.value);
if(this.value === this.min) {
setTimeout(function() {
range.max = that.getHeight();
range.value = that.getHeight() - that.getDistance();
}, 500)
}
};
this.getTarget().onscroll = function() {
range.max = that.getHeight();
range.value = that.getHeight() - that.getDistance();
};
},
scroll: function(y) {
var t = this.options.target;
return (t === window) ? window.scrollTo(0, y) : this.getTarget().scrollTop = y;
}
}
document.styleSheets[0].insertRule('input#scrollBar { -webkit-appearance: slider-vertical !important; position: fixed; top: 10px; left: 85%; z-index: 1000; height: ' + 95 + '%; opacity: 0.5; width: ' + cssWidth + 'px;}', 0);
document.styleSheets[0].insertRule('input#scrollBar::-webkit-slider-thumb { width: ' + cssWidth + 'px; height: ' + cssWidth + 'px;}', 0);
window._scrollBar_ = _scrollBar_;
})();
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.