A simple scroll api for a website
copy and paste the main.js and add <script src="/main.js"></script> in the html file
argument => [] = optional
- scrollAPI.init([config]) : [void] init the api (if the config is empty, target is document.documentElement) config = {target: [HTMLElement], scroll: [number]};
- scrollAPI.isEnable() : [boolean] check if the scrollAPI.disable is enable
- scrollAPI.scrollTo(el, marge) : [void] scroll to the element defined with a marge
- scrollAPI.enable() : [void] enable the scrollbar
- scrollAPI.disable() : [void] disable the scrollbar
- scrollAPI.barWidthY([target]) : [number] get the width of scrollbar at right
- scrollAPI.barWidthX([target]) : [number] get the width of scrollbar at bottom
- scrollAPI.clickedOnBarY(e[, x, y]) : [boolean] check if the user has clicked on the scrollbar at right
- scrollAPI.clickedOnBarX(e[, x, y]) : [boolean] check if the user has clicked on the scrollbar at bottom
- scrollAPI.clickedOnBar(e[, x, y]) : [boolean] clickedOnBarY(e[, x, y]) || clickedOnBarX(e[, x, y])
- scrollAPI.percentScroll([target, round]) : [number] get the percent of scrolled
- scrollAPI.isScrollable([target]) : [boolean] check if the element is scrollable (overflow, height)
window.addEventListener("load", function() {
scrollAPI.init({ //target is document.documentElement by default
scroll: -70 //scroll to the target with a marge of -70
});
console.log(scrollAPI.isEnable());
console.log(scrollAPI.barWidthY());
console.log(scrollAPI.isScrollable()); //html element
scrollAPI.disable();
setTimeout(function() {
scrollAPI.enable();
}, 1000); //1000 == 1s
document.addEventListener("mousedown", function(e) {
console.log("right bar: " + scrollAPI.clickedOnBarY(e));
console.log("bottom bar: " + scrollAPI.clickedOnBarX(e));
console.log("bottom/right bar: " + scrollAPI.clickedOnBar(e));
}, false);
});
window.addEventListener("load", function() {
scrollAPI.init({
target: document.getElementById('el')
});
console.log(scrollAPI.isEnable());
console.log(scrollAPI.barWidthY());
console.log(scrollAPI.isScrollable()); //el element
scrollAPI.disable();
setTimeout(function() {
scrollAPI.enable();
}, 1000); //1000 == 1s
document.getElementById('el').addEventListener("mousedown", function(e) {
console.log("right bar: " + scrollAPI.clickedOnBarY(e));
console.log("bottom bar: " + scrollAPI.clickedOnBarX(e));
console.log("bottom/right bar: " + scrollAPI.clickedOnBar(e));
}, false);
});
window.addEventListener("load", function() {
scrollAPI.init();
document.addEventListener('scroll', function() {
console.log('scrolled percent: ' + scrollAPI.percentScroll() + ' %');
});
});
Static functions
window.addEventListener("load", function() {
scrollAPI.scrollTo(document.getElementById('el'), 10);
console.log('scrolled percent: ' + scrollAPI.percentScroll(document.getElementById('el')) + ' %');
console.log(scrollAPI.barWidthY(document.getElementById('el')));
console.log(scrollAPI.isScrollable(document.getElementById('el'))); //el element
});