45.nice-scroll
Version:
Nicescroll is a jquery plugin, for nice customizabled scrollbars with a very similar ios/mobile style. It supports DIVs, IFrames and document page (body) scrollbars. Compatible with modern browsers Chrome/Firefox/Edge/Safari/Opera for smartphone ios/andro
1,504 lines (1,232 loc) • 120 kB
JavaScript
/* 45.nicescroll
-- version 0.0.1
-- copyright 2017-07-19 4nkit-5hukla*2017
-- licensed under the MIT
--
-- https://nicescroll.areaaperta.com/
-- https://github.com/4nkit-5hukla/45.nicescroll
--
*/
/* jshint expr: true */
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as anonymous module.
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node/CommonJS.
module.exports = factory(require('jquery'));
} else {
// Browser globals.
factory(jQuery);
}
}(function (jQuery) {
"use strict";
// globals
var domfocus = false,
mousefocus = false,
tabindexcounter = 0,
ascrailcounter = 2000,
globalmaxzindex = 0;
var $ = jQuery, // sandbox
_doc = document,
_win = window,
$window = $(_win);
var delegatevents = [];
// http://stackoverflow.com/questions/2161159/get-script-path
function getScriptPath() {
var scripts = _doc.currentScript || (function () { var s = _doc.getElementsByTagName('script'); return (s.length) ? s[s.length - 1] : false; })();
var path = scripts ? scripts.src.split('?')[0] : '';
return (path.split('/').length > 0) ? path.split('/').slice(0, -1).join('/') + '/' : '';
}
// based on code by Paul Irish https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
var setAnimationFrame = _win.requestAnimationFrame || _win.webkitRequestAnimationFrame || _win.mozRequestAnimationFrame || false;
var clearAnimationFrame = _win.cancelAnimationFrame || _win.webkitCancelAnimationFrame || _win.mozCancelAnimationFrame || false;
if (!setAnimationFrame) {
var anilasttime = 0;
setAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - anilasttime));
var id = _win.setTimeout(function () { callback(currTime + timeToCall); },
timeToCall);
anilasttime = currTime + timeToCall;
return id;
};
clearAnimationFrame = function (id) {
_win.clearTimeout(id);
};
} else {
if (!_win.cancelAnimationFrame) clearAnimationFrame = function (id) { };
}
var ClsMutationObserver = _win.MutationObserver || _win.WebKitMutationObserver || false;
var now = Date.now || function () { return new Date().getTime(); };
var _globaloptions = {
zindex: "auto",
cursoropacitymin: 0,
cursoropacitymax: 1,
cursorcolor: "#424242",
cursorwidth: "6px",
cursorborder: "1px solid #fff",
cursorborderradius: "5px",
scrollspeed: 40,
mousescrollstep: 9 * 3,
touchbehavior: false, // deprecated
emulatetouch: false, // replacing touchbehavior
hwacceleration: true,
usetransition: true,
boxzoom: false,
dblclickzoom: true,
gesturezoom: true,
grabcursorenabled: true,
autohidemode: true,
background: "",
iframeautoresize: true,
cursorminheight: 32,
preservenativescrolling: true,
railoffset: false,
railhoffset: false,
bouncescroll: true,
spacebarenabled: true,
railpadding: {
top: 0,
right: 0,
left: 0,
bottom: 0
},
disableoutline: true,
horizrailenabled: true,
railalign: "right",
railvalign: "bottom",
enabletranslate3d: true,
enablemousewheel: true,
enablekeyboard: true,
smoothscroll: true,
sensitiverail: true,
enablemouselockapi: true,
// cursormaxheight:false,
cursorfixedheight: false,
directionlockdeadzone: 6,
hidecursordelay: 400,
nativeparentscrolling: true,
enablescrollonselection: true,
overflowx: true,
overflowy: true,
cursordragspeed: 0.3,
rtlmode: "auto",
cursordragontouch: false,
oneaxismousemode: "auto",
scriptpath: getScriptPath(),
preventmultitouchscrolling: true,
disablemutationobserver: false,
enableobserver: true,
scrollbarid: false,
scrollCLass: false
};
var browserdetected = false;
var getBrowserDetection = function () {
if (browserdetected) return browserdetected;
var _el = _doc.createElement('DIV'),
_style = _el.style,
_agent = navigator.userAgent,
_platform = navigator.platform,
d = {};
d.haspointerlock = "pointerLockElement" in _doc || "webkitPointerLockElement" in _doc || "mozPointerLockElement" in _doc;
d.isopera = ("opera" in _win); // 12-
d.isopera12 = (d.isopera && ("getUserMedia" in navigator));
d.isoperamini = (Object.prototype.toString.call(_win.operamini) === "[object OperaMini]");
d.isie = (("all" in _doc) && ("attachEvent" in _el) && !d.isopera); //IE10-
d.isieold = (d.isie && !("msInterpolationMode" in _style)); // IE6 and older
d.isie7 = d.isie && !d.isieold && (!("documentMode" in _doc) || (_doc.documentMode === 7));
d.isie8 = d.isie && ("documentMode" in _doc) && (_doc.documentMode === 8);
d.isie9 = d.isie && ("performance" in _win) && (_doc.documentMode === 9);
d.isie10 = d.isie && ("performance" in _win) && (_doc.documentMode === 10);
d.isie11 = ("msRequestFullscreen" in _el) && (_doc.documentMode >= 11); // IE11+
d.ismsedge = ("msCredentials" in _win); // MS Edge 14+
d.ismozilla = ("MozAppearance" in _style);
d.iswebkit = !d.ismsedge && ("WebkitAppearance" in _style);
d.ischrome = d.iswebkit && ("chrome" in _win);
d.ischrome38 = (d.ischrome && ("touchAction" in _style)); // behavior changed in touch emulation
d.ischrome22 = (!d.ischrome38) && (d.ischrome && d.haspointerlock);
d.ischrome26 = (!d.ischrome38) && (d.ischrome && ("transition" in _style)); // issue with transform detection (maintain prefix)
d.cantouch = ("ontouchstart" in _doc.documentElement) || ("ontouchstart" in _win); // with detection for Chrome Touch Emulation
d.hasw3ctouch = (_win.PointerEvent || false) && ((navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)); //IE11 pointer events, following W3C Pointer Events spec
d.hasmstouch = (!d.hasw3ctouch) && (_win.MSPointerEvent || false); // IE10 pointer events
d.ismac = /^mac$/i.test(_platform);
d.isios = d.cantouch && /iphone|ipad|ipod/i.test(_platform);
d.isios4 = d.isios && !("seal" in Object);
d.isios7 = d.isios && ("webkitHidden" in _doc); //iOS 7+
d.isios8 = d.isios && ("hidden" in _doc); //iOS 8+
d.isios10 = d.isios && _win.Proxy; //iOS 10+
d.isandroid = (/android/i.test(_agent));
d.haseventlistener = ("addEventListener" in _el);
d.trstyle = false;
d.hastransform = false;
d.hastranslate3d = false;
d.transitionstyle = false;
d.hastransition = false;
d.transitionend = false;
d.trstyle = "transform";
d.hastransform = ("transform" in _style) || (function () {
var check = ['msTransform', 'webkitTransform', 'MozTransform', 'OTransform'];
for (var a = 0, c = check.length; a < c; a++) {
if (_style[check[a]] !== undefined) {
d.trstyle = check[a];
break;
}
}
d.hastransform = (!!d.trstyle);
})();
if (d.hastransform) {
_style[d.trstyle] = "translate3d(1px,2px,3px)";
d.hastranslate3d = /translate3d/.test(_style[d.trstyle]);
}
d.transitionstyle = "transition";
d.prefixstyle = '';
d.transitionend = "transitionend";
d.hastransition = ("transition" in _style) || (function () {
d.transitionend = false;
var check = ['webkitTransition', 'msTransition', 'MozTransition', 'OTransition', 'OTransition', 'KhtmlTransition'];
var prefix = ['-webkit-', '-ms-', '-moz-', '-o-', '-o', '-khtml-'];
var evs = ['webkitTransitionEnd', 'msTransitionEnd', 'transitionend', 'otransitionend', 'oTransitionEnd', 'KhtmlTransitionEnd'];
for (var a = 0, c = check.length; a < c; a++) {
if (check[a] in _style) {
d.transitionstyle = check[a];
d.prefixstyle = prefix[a];
d.transitionend = evs[a];
break;
}
}
if (d.ischrome26) d.prefixstyle = prefix[1]; // always use prefix
d.hastransition = (d.transitionstyle);
})();
function detectCursorGrab() {
var lst = ['grab', '-webkit-grab', '-moz-grab'];
if ((d.ischrome && !d.ischrome38) || d.isie) lst = []; // force setting for IE returns false positive and chrome cursor bug
for (var a = 0, l = lst.length; a < l; a++) {
var p = lst[a];
_style.cursor = p;
if (_style.cursor == p) return p;
}
return 'url(https://cdnjs.cloudflare.com/ajax/libs/slider-pro/1.3.0/css/images/openhand.cur),n-resize'; // thanks to https://cdnjs.com/ for the openhand cursor!
}
d.cursorgrabvalue = detectCursorGrab();
d.hasmousecapture = ("setCapture" in _el);
d.hasMutationObserver = (ClsMutationObserver !== false);
_el = null; //memory released
browserdetected = d;
return d;
};
var NiceScrollClass = function (myopt, me) {
var self = this;
this.version = '3.7.6';
this.name = 'nicescroll';
this.me = me;
var $body = $("body");
var opt = this.opt = {
doc: $body,
win: false
};
$.extend(opt, _globaloptions); // clone opts
// Options for internal use
opt.snapbackspeed = 80;
if (myopt || false) {
for (var a in opt) {
if (myopt[a] !== undefined) opt[a] = myopt[a];
}
}
if (opt.disablemutationobserver) ClsMutationObserver = false;
this.doc = opt.doc;
this.iddoc = (this.doc && this.doc[0]) ? this.doc[0].id || '' : '';
this.ispage = /^BODY|HTML/.test((opt.win) ? opt.win[0].nodeName : this.doc[0].nodeName);
this.haswrapper = (opt.win !== false);
this.win = opt.win || (this.ispage ? $window : this.doc);
this.docscroll = (this.ispage && !this.haswrapper) ? $window : this.win;
this.body = $body;
this.viewport = false;
this.isfixed = false;
this.iframe = false;
this.isiframe = ((this.doc[0].nodeName == 'IFRAME') && (this.win[0].nodeName == 'IFRAME'));
this.istextarea = (this.win[0].nodeName == 'TEXTAREA');
this.forcescreen = false; //force to use screen position on events
this.canshowonmouseevent = (opt.autohidemode != "scroll");
// Events jump table
this.onmousedown = false;
this.onmouseup = false;
this.onmousemove = false;
this.onmousewheel = false;
this.onkeypress = false;
this.ongesturezoom = false;
this.onclick = false;
// Nicescroll custom events
this.onscrollstart = false;
this.onscrollend = false;
this.onscrollcancel = false;
this.onzoomin = false;
this.onzoomout = false;
// Let's start!
this.view = false;
this.page = false;
this.scroll = {
x: 0,
y: 0
};
this.scrollratio = {
x: 0,
y: 0
};
this.cursorheight = 20;
this.scrollvaluemax = 0;
// http://dev.w3.org/csswg/css-writing-modes-3/#logical-to-physical
// http://dev.w3.org/csswg/css-writing-modes-3/#svg-writing-mode
if (opt.rtlmode == "auto") {
var target = this.win[0] == _win ? this.body : this.win;
var writingMode = target.css("writing-mode") || target.css("-webkit-writing-mode") || target.css("-ms-writing-mode") || target.css("-moz-writing-mode");
if (writingMode == "horizontal-tb" || writingMode == "lr-tb" || writingMode === "") {
this.isrtlmode = (target.css("direction") == "rtl");
this.isvertical = false;
} else {
this.isrtlmode = (writingMode == "vertical-rl" || writingMode == "tb" || writingMode == "tb-rl" || writingMode == "rl-tb");
this.isvertical = (writingMode == "vertical-rl" || writingMode == "tb" || writingMode == "tb-rl");
}
} else {
this.isrtlmode = (opt.rtlmode === true);
this.isvertical = false;
}
// this.checkrtlmode = false;
this.scrollrunning = false;
this.scrollmom = false;
this.observer = false; // observer div changes
this.observerremover = false; // observer on parent for remove detection
this.observerbody = false; // observer on body for position change
if (opt.scrollbarid !== false) {
this.id = opt.scrollbarid;
} else {
do {
this.id = "ascrail" + (ascrailcounter++);
} while (_doc.getElementById(this.id));
}
this.rail = false;
this.cursor = false;
this.cursorfreezed = false;
this.selectiondrag = false;
this.zoom = false;
this.zoomactive = false;
this.hasfocus = false;
this.hasmousefocus = false;
//this.visibility = true;
this.railslocked = false; // locked by resize
this.locked = false; // prevent lost of locked status sets by user
this.hidden = false; // rails always hidden
this.cursoractive = true; // user can interact with cursors
this.wheelprevented = false; //prevent mousewheel event
this.overflowx = opt.overflowx;
this.overflowy = opt.overflowy;
this.nativescrollingarea = false;
this.checkarea = 0;
this.events = []; // event list for unbind
this.saved = {}; // style saved
this.delaylist = {};
this.synclist = {};
this.lastdeltax = 0;
this.lastdeltay = 0;
this.detected = getBrowserDetection();
var cap = $.extend({}, this.detected);
this.canhwscroll = (cap.hastransform && opt.hwacceleration);
this.ishwscroll = (this.canhwscroll && self.haswrapper);
if (!this.isrtlmode) {
this.hasreversehr = false;
} else if (this.isvertical) { // RTL mode with reverse horizontal axis
this.hasreversehr = !(cap.iswebkit || cap.isie || cap.isie11);
} else {
this.hasreversehr = !(cap.iswebkit || (cap.isie && !cap.isie10 && !cap.isie11));
}
this.istouchcapable = false; // desktop devices with touch screen support
//## Check WebKit-based desktop with touch support
//## + Firefox 18 nightly build (desktop) false positive (or desktop with touch support)
if (!cap.cantouch && (cap.hasw3ctouch || cap.hasmstouch)) { // desktop device with multiple input
this.istouchcapable = true;
} else if (cap.cantouch && !cap.isios && !cap.isandroid && (cap.iswebkit || cap.ismozilla)) {
this.istouchcapable = true;
}
//## disable MouseLock API on user request
if (!opt.enablemouselockapi) {
cap.hasmousecapture = false;
cap.haspointerlock = false;
}
this.debounced = function (name, fn, tm) {
if (!self) return;
var dd = self.delaylist[name] || false;
if (!dd) {
self.delaylist[name] = {
h: setAnimationFrame(function () {
self.delaylist[name].fn.call(self);
self.delaylist[name] = false;
}, tm)
};
fn.call(self);
}
self.delaylist[name].fn = fn;
};
this.synched = function (name, fn) {
if (self.synclist[name]) self.synclist[name] = fn;
else {
self.synclist[name] = fn;
setAnimationFrame(function () {
if (!self) return;
self.synclist[name] && self.synclist[name].call(self);
self.synclist[name] = null;
});
}
};
this.unsynched = function (name) {
if (self.synclist[name]) self.synclist[name] = false;
};
this.css = function (el, pars) { // save & set
for (var n in pars) {
self.saved.css.push([el, n, el.css(n)]);
el.css(n, pars[n]);
}
};
this.scrollTop = function (val) {
return (val === undefined) ? self.getScrollTop() : self.setScrollTop(val);
};
this.scrollLeft = function (val) {
return (val === undefined) ? self.getScrollLeft() : self.setScrollLeft(val);
};
// derived by by Dan Pupius www.pupius.net
var BezierClass = function (st, ed, spd, p1, p2, p3, p4) {
this.st = st;
this.ed = ed;
this.spd = spd;
this.p1 = p1 || 0;
this.p2 = p2 || 1;
this.p3 = p3 || 0;
this.p4 = p4 || 1;
this.ts = now();
this.df = ed - st;
};
BezierClass.prototype = {
B2: function (t) {
return 3 * (1 - t) * (1 - t) * t;
},
B3: function (t) {
return 3 * (1 - t) * t * t;
},
B4: function (t) {
return t * t * t;
},
getPos: function () {
return (now() - this.ts) / this.spd;
},
getNow: function () {
var pc = (now() - this.ts) / this.spd;
var bz = this.B2(pc) + this.B3(pc) + this.B4(pc);
return (pc >= 1) ? this.ed : this.st + (this.df * bz) | 0;
},
update: function (ed, spd) {
this.st = this.getNow();
this.ed = ed;
this.spd = spd;
this.ts = now();
this.df = this.ed - this.st;
return this;
}
};
//derived from http://stackoverflow.com/questions/11236090/
function getMatrixValues() {
var tr = self.doc.css(cap.trstyle);
if (tr && (tr.substr(0, 6) == "matrix")) {
return tr.replace(/^.*\((.*)\)$/g, "$1").replace(/px/g, '').split(/, +/);
}
return false;
}
if (this.ishwscroll) { // hw accelerated scroll
this.doc.translate = {
x: 0,
y: 0,
tx: "0px",
ty: "0px"
};
//this one can help to enable hw accel on ios6 http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/
if (cap.hastranslate3d && cap.isios) this.doc.css("-webkit-backface-visibility", "hidden"); // prevent flickering http://stackoverflow.com/questions/3461441/
this.getScrollTop = function (last) {
if (!last) {
var mtx = getMatrixValues();
if (mtx) return (mtx.length == 16) ? -mtx[13] : -mtx[5]; //matrix3d 16 on IE10
if (self.timerscroll && self.timerscroll.bz) return self.timerscroll.bz.getNow();
}
return self.doc.translate.y;
};
this.getScrollLeft = function (last) {
if (!last) {
var mtx = getMatrixValues();
if (mtx) return (mtx.length == 16) ? -mtx[12] : -mtx[4]; //matrix3d 16 on IE10
if (self.timerscroll && self.timerscroll.bh) return self.timerscroll.bh.getNow();
}
return self.doc.translate.x;
};
this.notifyScrollEvent = function (el) {
var e = _doc.createEvent("UIEvents");
e.initUIEvent("scroll", false, false, _win, 1);
e.niceevent = true;
el.dispatchEvent(e);
};
var cxscrollleft = (this.isrtlmode) ? 1 : -1;
if (cap.hastranslate3d && opt.enabletranslate3d) {
this.setScrollTop = function (val, silent) {
self.doc.translate.y = val;
self.doc.translate.ty = (val * -1) + "px";
self.doc.css(cap.trstyle, "translate3d(" + self.doc.translate.tx + "," + self.doc.translate.ty + ",0)");
if (!silent) self.notifyScrollEvent(self.win[0]);
};
this.setScrollLeft = function (val, silent) {
self.doc.translate.x = val;
self.doc.translate.tx = (val * cxscrollleft) + "px";
self.doc.css(cap.trstyle, "translate3d(" + self.doc.translate.tx + "," + self.doc.translate.ty + ",0)");
if (!silent) self.notifyScrollEvent(self.win[0]);
};
} else {
this.setScrollTop = function (val, silent) {
self.doc.translate.y = val;
self.doc.translate.ty = (val * -1) + "px";
self.doc.css(cap.trstyle, "translate(" + self.doc.translate.tx + "," + self.doc.translate.ty + ")");
if (!silent) self.notifyScrollEvent(self.win[0]);
};
this.setScrollLeft = function (val, silent) {
self.doc.translate.x = val;
self.doc.translate.tx = (val * cxscrollleft) + "px";
self.doc.css(cap.trstyle, "translate(" + self.doc.translate.tx + "," + self.doc.translate.ty + ")");
if (!silent) self.notifyScrollEvent(self.win[0]);
};
}
} else { // native scroll
this.getScrollTop = function () {
return self.docscroll.scrollTop();
};
this.setScrollTop = function (val) {
self.docscroll.scrollTop(val);
};
this.getScrollLeft = function () {
var val;
if (!self.hasreversehr) {
val = self.docscroll.scrollLeft();
} else if (self.detected.ismozilla) {
val = self.page.maxw - Math.abs(self.docscroll.scrollLeft());
} else {
val = self.page.maxw - self.docscroll.scrollLeft();
}
return val;
};
this.setScrollLeft = function (val) {
return setTimeout(function () {
if (!self) return;
if (self.hasreversehr) {
if (self.detected.ismozilla) {
val = -(self.page.maxw - val);
} else {
val = self.page.maxw - val;
}
}
return self.docscroll.scrollLeft(val);
}, 1);
};
}
this.getTarget = function (e) {
if (!e) return false;
if (e.target) return e.target;
if (e.srcElement) return e.srcElement;
return false;
};
this.hasParent = function (e, id) {
if (!e) return false;
var el = e.target || e.srcElement || e || false;
while (el && el.id != id) {
el = el.parentNode || false;
}
return (el !== false);
};
function getZIndex() {
var dom = self.win;
if ("zIndex" in dom) return dom.zIndex(); // use jQuery UI method when available
while (dom.length > 0) {
if (dom[0].nodeType == 9) return false;
var zi = dom.css('zIndex');
if (!isNaN(zi) && zi !== 0) return parseInt(zi);
dom = dom.parent();
}
return false;
}
//inspired by http://forum.jquery.com/topic/width-includes-border-width-when-set-to-thin-medium-thick-in-ie
var _convertBorderWidth = {
"thin": 1,
"medium": 3,
"thick": 5
};
function getWidthToPixel(dom, prop, chkheight) {
var wd = dom.css(prop);
var px = parseFloat(wd);
if (isNaN(px)) {
px = _convertBorderWidth[wd] || 0;
var brd = (px == 3) ? ((chkheight) ? (self.win.outerHeight() - self.win.innerHeight()) : (self.win.outerWidth() - self.win.innerWidth())) : 1; //DON'T TRUST CSS
if (self.isie8 && px) px += 1;
return (brd) ? px : 0;
}
return px;
}
this.getDocumentScrollOffset = function () {
return {
top: _win.pageYOffset || _doc.documentElement.scrollTop,
left: _win.pageXOffset || _doc.documentElement.scrollLeft
};
};
this.getOffset = function () {
if (self.isfixed) {
var ofs = self.win.offset(); // fix Chrome auto issue (when right/bottom props only)
var scrl = self.getDocumentScrollOffset();
ofs.top -= scrl.top;
ofs.left -= scrl.left;
return ofs;
}
var ww = self.win.offset();
if (!self.viewport) return ww;
var vp = self.viewport.offset();
return {
top: ww.top - vp.top,
left: ww.left - vp.left
};
};
this.updateScrollBar = function (len) {
var pos, off;
if (self.ishwscroll) {
self.rail.css({
height: self.win.innerHeight() - (opt.railpadding.top + opt.railpadding.bottom)
});
if (self.railh) self.railh.css({
width: self.win.innerWidth() - (opt.railpadding.left + opt.railpadding.right)
});
} else {
var wpos = self.getOffset();
pos = {
top: wpos.top,
left: wpos.left - (opt.railpadding.left + opt.railpadding.right)
};
pos.top += getWidthToPixel(self.win, 'border-top-width', true);
pos.left += (self.rail.align) ? self.win.outerWidth() - getWidthToPixel(self.win, 'border-right-width') - self.rail.width : getWidthToPixel(self.win, 'border-left-width');
off = opt.railoffset;
if (off) {
if (off.top) pos.top += off.top;
if (off.left) pos.left += off.left;
}
if (!self.railslocked) self.rail.css({
top: pos.top,
left: pos.left,
height: ((len) ? len.h : self.win.innerHeight()) - (opt.railpadding.top + opt.railpadding.bottom)
});
if (self.zoom) {
self.zoom.css({
top: pos.top + 1,
left: (self.rail.align == 1) ? pos.left - 20 : pos.left + self.rail.width + 4
});
}
if (self.railh && !self.railslocked) {
pos = {
top: wpos.top,
left: wpos.left
};
off = opt.railhoffset;
if (off) {
if (off.top) pos.top += off.top;
if (off.left) pos.left += off.left;
}
var y = (self.railh.align) ? pos.top + getWidthToPixel(self.win, 'border-top-width', true) + self.win.innerHeight() - self.railh.height : pos.top + getWidthToPixel(self.win, 'border-top-width', true);
var x = pos.left + getWidthToPixel(self.win, 'border-left-width');
self.railh.css({
top: y - (opt.railpadding.top + opt.railpadding.bottom),
left: x,
width: self.railh.width
});
}
}
};
this.doRailClick = function (e, dbl, hr) {
var fn, pg, cur, pos;
if (self.railslocked) return;
self.cancelEvent(e);
if (!("pageY" in e)) {
e.pageX = e.clientX + _doc.documentElement.scrollLeft;
e.pageY = e.clientY + _doc.documentElement.scrollTop;
}
if (dbl) {
fn = (hr) ? self.doScrollLeft : self.doScrollTop;
cur = (hr) ? ((e.pageX - self.railh.offset().left - (self.cursorwidth / 2)) * self.scrollratio.x) : ((e.pageY - self.rail.offset().top - (self.cursorheight / 2)) * self.scrollratio.y);
self.unsynched("relativexy");
fn(cur|0);
} else {
fn = (hr) ? self.doScrollLeftBy : self.doScrollBy;
cur = (hr) ? self.scroll.x : self.scroll.y;
pos = (hr) ? e.pageX - self.railh.offset().left : e.pageY - self.rail.offset().top;
pg = (hr) ? self.view.w : self.view.h;
fn((cur >= pos) ? pg : -pg);
}
};
self.newscrolly = self.newscrollx = 0;
self.hasanimationframe = ("requestAnimationFrame" in _win);
self.hascancelanimationframe = ("cancelAnimationFrame" in _win);
self.hasborderbox = false;
this.init = function () {
self.saved.css = [];
if (cap.isoperamini) return true; // SORRY, DO NOT WORK!
if (cap.isandroid && !("hidden" in _doc)) return true; // Android 3- SORRY, DO NOT WORK!
opt.emulatetouch = opt.emulatetouch || opt.touchbehavior; // mantain compatibility with "touchbehavior"
self.hasborderbox = _win.getComputedStyle && (_win.getComputedStyle(_doc.body)['box-sizing'] === "border-box");
var _scrollyhidden = { 'overflow-y': 'hidden' };
if (cap.isie11 || cap.isie10) _scrollyhidden['-ms-overflow-style'] = 'none'; // IE 10 & 11 is always a world apart!
if (self.ishwscroll) {
this.doc.css(cap.transitionstyle, cap.prefixstyle + 'transform 0ms ease-out');
if (cap.transitionend) self.bind(self.doc, cap.transitionend, self.onScrollTransitionEnd, false); //I have got to do something usefull!!
}
self.zindex = "auto";
if (!self.ispage && opt.zindex == "auto") {
self.zindex = getZIndex() || "auto";
} else {
self.zindex = opt.zindex;
}
if (!self.ispage && self.zindex != "auto" && self.zindex > globalmaxzindex) {
globalmaxzindex = self.zindex;
}
if (self.isie && self.zindex === 0 && opt.zindex == "auto") { // fix IE auto == 0
self.zindex = "auto";
}
if (!self.ispage || !cap.isieold) {
var cont = self.docscroll;
if (self.ispage) cont = (self.haswrapper) ? self.win : self.doc;
self.css(cont, _scrollyhidden);
if (self.ispage && (cap.isie11 || cap.isie)) { // IE 7-11
self.css($("html"), _scrollyhidden);
}
if (cap.isios && !self.ispage && !self.haswrapper) self.css($body, {
"-webkit-overflow-scrolling": "touch"
}); //force hw acceleration
var cursor = $(_doc.createElement('div'));
cursor.css({
position: "relative",
top: 0,
"float": "right",
width: opt.cursorwidth,
height: 0,
'background-color': opt.cursorcolor,
border: opt.cursorborder,
'background-clip': 'padding-box',
'-webkit-border-radius': opt.cursorborderradius,
'-moz-border-radius': opt.cursorborderradius,
'border-radius': opt.cursorborderradius
});
cursor.addClass('nicescroll-cursors');
self.cursor = cursor;
var rail = $(_doc.createElement('div'));
rail.attr('id', self.id);
rail.addClass('nicescroll-rails nicescroll-rails-vr');
if (opt.scrollCLass) {
rail.addClass(opt.scrollCLass);
}
var v, a, kp = ["left", "right", "top", "bottom"]; //**
for (var n in kp) {
a = kp[n];
v = opt.railpadding[a] || 0;
v && rail.css("padding-" + a, v + "px");
}
rail.append(cursor);
rail.width = Math.max(parseFloat(opt.cursorwidth), cursor.outerWidth());
rail.css({
width: rail.width + "px",
zIndex: self.zindex,
background: opt.background,
cursor: "default"
});
rail.visibility = true;
rail.scrollable = true;
rail.align = (opt.railalign == "left") ? 0 : 1;
self.rail = rail;
self.rail.drag = false;
var zoom = false;
if (opt.boxzoom && !self.ispage && !cap.isieold) {
zoom = _doc.createElement('div');
self.bind(zoom, "click", self.doZoom);
self.bind(zoom, "mouseenter", function () {
self.zoom.css('opacity', opt.cursoropacitymax);
});
self.bind(zoom, "mouseleave", function () {
self.zoom.css('opacity', opt.cursoropacitymin);
});
self.zoom = $(zoom);
self.zoom.css({
cursor: "pointer",
zIndex: self.zindex,
backgroundImage: 'url(' + opt.scriptpath + 'zoomico.png)',
height: 18,
width: 18,
backgroundPosition: '0 0'
});
if (opt.dblclickzoom) self.bind(self.win, "dblclick", self.doZoom);
if (cap.cantouch && opt.gesturezoom) {
self.ongesturezoom = function (e) {
if (e.scale > 1.5) self.doZoomIn(e);
if (e.scale < 0.8) self.doZoomOut(e);
return self.cancelEvent(e);
};
self.bind(self.win, "gestureend", self.ongesturezoom);
}
}
// init HORIZ
self.railh = false;
var railh;
if (opt.horizrailenabled) {
self.css(cont, {
overflowX: 'hidden'
});
cursor = $(_doc.createElement('div'));
cursor.css({
position: "absolute",
top: 0,
height: opt.cursorwidth,
width: 0,
backgroundColor: opt.cursorcolor,
border: opt.cursorborder,
backgroundClip: 'padding-box',
'-webkit-border-radius': opt.cursorborderradius,
'-moz-border-radius': opt.cursorborderradius,
'border-radius': opt.cursorborderradius
});
if (cap.isieold) cursor.css('overflow', 'hidden'); //IE6 horiz scrollbar issue
cursor.addClass('nicescroll-cursors');
self.cursorh = cursor;
railh = $(_doc.createElement('div'));
railh.attr('id', self.id + '-hr');
railh.addClass('nicescroll-rails nicescroll-rails-hr');
if (opt.scrollCLass) {
railh.addClass(opt.scrollCLass);
}
railh.height = Math.max(parseFloat(opt.cursorwidth), cursor.outerHeight());
railh.css({
height: railh.height + "px",
'zIndex': self.zindex,
"background": opt.background
});
railh.append(cursor);
railh.visibility = true;
railh.scrollable = true;
railh.align = (opt.railvalign == "top") ? 0 : 1;
self.railh = railh;
self.railh.drag = false;
}
if (self.ispage) {
rail.css({
position: "fixed",
top: 0,
height: "100%"
});
rail.css((rail.align) ? { right: 0 } : { left: 0 });
self.body.append(rail);
if (self.railh) {
railh.css({
position: "fixed",
left: 0,
width: "100%"
});
railh.css((railh.align) ? { bottom: 0 } : { top: 0 });
self.body.append(railh);
}
} else {
if (self.ishwscroll) {
if (self.win.css('position') == 'static') self.css(self.win, { 'position': 'relative' });
var bd = (self.win[0].nodeName == 'HTML') ? self.body : self.win;
$(bd).scrollTop(0).scrollLeft(0); // fix rail position if content already scrolled
if (self.zoom) {
self.zoom.css({
position: "absolute",
top: 1,
right: 0,
"margin-right": rail.width + 4
});
bd.append(self.zoom);
}
rail.css({
position: "absolute",
top: 0
});
rail.css((rail.align) ? { right: 0 } : { left: 0 });
bd.append(rail);
if (railh) {
railh.css({
position: "absolute",
left: 0,
bottom: 0
});
railh.css((railh.align) ? { bottom: 0 } : { top: 0 });
bd.append(railh);
}
} else {
self.isfixed = (self.win.css("position") == "fixed");
var rlpos = (self.isfixed) ? "fixed" : "absolute";
if (!self.isfixed) self.viewport = self.getViewport(self.win[0]);
if (self.viewport) {
self.body = self.viewport;
if (!(/fixed|absolute/.test(self.viewport.css("position")))) self.css(self.viewport, {
"position": "relative"
});
}
rail.css({
position: rlpos
});
if (self.zoom) self.zoom.css({
position: rlpos
});
self.updateScrollBar();
self.body.append(rail);
if (self.zoom) self.body.append(self.zoom);
if (self.railh) {
railh.css({
position: rlpos
});
self.body.append(railh);
}
}
if (cap.isios) self.css(self.win, {
'-webkit-tap-highlight-color': 'rgba(0,0,0,0)',
'-webkit-touch-callout': 'none'
}); // prevent grey layer on click
if (opt.disableoutline) {
if (cap.isie) self.win.attr("hideFocus", "true"); // IE, prevent dotted rectangle on focused div
if (cap.iswebkit) self.win.css('outline', 'none'); // Webkit outline
}
}
if (opt.autohidemode === false) {
self.autohidedom = false;
self.rail.css({
opacity: opt.cursoropacitymax
});
if (self.railh) self.railh.css({
opacity: opt.cursoropacitymax
});
} else if ((opt.autohidemode === true) || (opt.autohidemode === "leave")) {
self.autohidedom = $().add(self.rail);
if (cap.isie8) self.autohidedom = self.autohidedom.add(self.cursor);
if (self.railh) self.autohidedom = self.autohidedom.add(self.railh);
if (self.railh && cap.isie8) self.autohidedom = self.autohidedom.add(self.cursorh);
} else if (opt.autohidemode == "scroll") {
self.autohidedom = $().add(self.rail);
if (self.railh) self.autohidedom = self.autohidedom.add(self.railh);
} else if (opt.autohidemode == "cursor") {
self.autohidedom = $().add(self.cursor);
if (self.railh) self.autohidedom = self.autohidedom.add(self.cursorh);
} else if (opt.autohidemode == "hidden") {
self.autohidedom = false;
self.hide();
self.railslocked = false;
}
if (cap.cantouch || self.istouchcapable || opt.emulatetouch || cap.hasmstouch) {
self.scrollmom = new ScrollMomentumClass2D(self);
var delayedclick = null;
self.ontouchstart = function (e) {
if (self.locked) return false;
//if (e.pointerType && e.pointerType != 2 && e.pointerType != "touch") return false;
if (e.pointerType && (e.pointerType === 'mouse' || e.pointerType === e.MSPOINTER_TYPE_MOUSE)) return false; // need test on surface!!
self.hasmoving = false;
if (self.scrollmom.timer) {
self.triggerScrollEnd();
self.scrollmom.stop();
}
if (!self.railslocked) {
var tg = self.getTarget(e);
if (tg) {
var skp = (/INPUT/i.test(tg.nodeName)) && (/range/i.test(tg.type));
if (skp) return self.stopPropagation(e);
}
var ismouse = (e.type === "mousedown");
if (!("clientX" in e) && ("changedTouches" in e)) {
e.clientX = e.changedTouches[0].clientX;
e.clientY = e.changedTouches[0].clientY;
}
if (self.forcescreen) {
var le = e;
e = {
"original": (e.original) ? e.original : e
};
e.clientX = le.screenX;
e.clientY = le.screenY;
}
self.rail.drag = {
x: e.clientX,
y: e.clientY,
sx: self.scroll.x,
sy: self.scroll.y,
st: self.getScrollTop(),
sl: self.getScrollLeft(),
pt: 2,
dl: false,
tg: tg
};
if (self.ispage || !opt.directionlockdeadzone) {
self.rail.drag.dl = "f";
} else {
var view = {
w: $window.width(),
h: $window.height()
};
var page = self.getContentSize();
var maxh = page.h - view.h;
var maxw = page.w - view.w;
if (self.rail.scrollable && !self.railh.scrollable) self.rail.drag.ck = (maxh > 0) ? "v" : false;
else if (!self.rail.scrollable && self.railh.scrollable) self.rail.drag.ck = (maxw > 0) ? "h" : false;
else self.rail.drag.ck = false;
}
if (opt.emulatetouch && self.isiframe && cap.isie) {
var wp = self.win.position();
self.rail.drag.x += wp.left;
self.rail.drag.y += wp.top;
}
self.hasmoving = false;
self.lastmouseup = false;
self.scrollmom.reset(e.clientX, e.clientY);
if (tg&&ismouse) {
var ip = /INPUT|SELECT|BUTTON|TEXTAREA/i.test(tg.nodeName);
if (!ip) {
if (cap.hasmousecapture) tg.setCapture();
if (opt.emulatetouch) {
if (tg.onclick && !(tg._onclick || false)) { // intercept DOM0 onclick event
tg._onclick = tg.onclick;
tg.onclick = function (e) {
if (self.hasmoving) return false;
tg._onclick.call(this, e);
};
}
return self.cancelEvent(e);
}
return self.stopPropagation(e);
}
if (/SUBMIT|CANCEL|BUTTON/i.test($(tg).attr('type'))) {
self.preventclick = {
"tg": tg,
"click": false
};
}
}
}
};
self.ontouchend = function (e) {
if (!self.rail.drag) return true;
if (self.rail.drag.pt == 2) {
//if (e.pointerType && e.pointerType != 2 && e.pointerType != "touch") return false;
if (e.pointerType && (e.pointerType === 'mouse' || e.pointerType === e.MSPOINTER_TYPE_MOUSE)) return false;
self.rail.drag = false;
var ismouse = (e.type === "mouseup");
if (self.hasmoving) {
self.scrollmom.doMomentum();
self.lastmouseup = true;
self.hideCursor();
if (cap.hasmousecapture) _doc.releaseCapture();
if (ismouse) return self.cancelEvent(e);
}
}
else if (self.rail.drag.pt == 1) {
return self.onmouseup(e);
}
};
var moveneedoffset = (opt.emulatetouch && self.isiframe && !cap.hasmousecapture);
var locktollerance = opt.directionlockdeadzone * 0.3 | 0;
self.ontouchmove = function (e, byiframe) {
if (!self.rail.drag) return true;
if (e.targetTouches && opt.preventmultitouchscrolling) {
if (e.targetTouches.length > 1) return true; // multitouch
}
//if (e.pointerType && e.pointerType != 2 && e.pointerType != "touch") return false;
if (e.pointerType && (e.pointerType === 'mouse' || e.pointerType === e.MSPOINTER_TYPE_MOUSE)) return true;
if (self.rail.drag.pt == 2) {
if (("changedTouches" in e)) {
e.clientX = e.changedTouches[0].clientX;
e.clientY = e.changedTouches[0].clientY;
}
var ofy, ofx;
ofx = ofy = 0;
if (moveneedoffset && !byiframe) {
var wp = self.win.position();
ofx = -wp.left;
ofy = -wp.top;
}
var fy = e.clientY + ofy;
var my = (fy - self.rail.drag.y);
var fx = e.clientX + ofx;
var mx = (fx - self.rail.drag.x);
var ny = self.rail.drag.st - my;
if (self.ishwscroll && opt.bouncescroll) {
if (ny < 0) {
ny = Math.round(ny / 2);
} else if (ny > self.page.maxh) {
ny = self.page.maxh + Math.round((ny - self.page.maxh) / 2);
}
} else {
if (ny < 0) {
ny = 0;
fy = 0;
}
else if (ny > self.page.maxh) {
ny = self.page.maxh;
fy = 0;
}
if (fy === 0 && !self.hasmoving) {
if (!self.ispage) self.rail.drag = false;
return true;
}
}
var nx = self.getScrollLeft();
if (self.railh && self.railh.scrollable) {
nx = (self.isrtlmode) ? mx - self.rail.drag.sl : self.rail.drag.sl - mx;
if (self.ishwscroll && opt.bouncescroll) {
if (nx < 0) {
nx = Math.round(nx / 2);
} else if (nx > self.page.maxw) {
nx = self.page.maxw + Math.round((nx - self.page.maxw) / 2);
}
} else {
if (nx < 0) {
nx = 0;
fx = 0;
}
if (nx > self.page.maxw) {
nx = self.page.maxw;
fx = 0;
}
}
}
if (!self.hasmoving) {
if (self.rail.drag.y === e.clientY && self.rail.drag.x === e.clientX) return self.cancelEvent(e); // prevent first useless move event
var ay = Math.abs(my);
var ax = Math.abs(mx);
var dz = opt.directionlockdeadzone;
if (!self.rail.drag.ck) {
if (ay > dz && ax > dz) self.rail.drag.dl = "f";
else if (ay > dz) self.rail.drag.dl = (ax > locktollerance) ? "f" : "v";
else if (ax > dz) self.rail.drag.dl = (ay > locktollerance) ? "f" : "h";
}
else if (self.rail.drag.ck == "v") {
if (ax > dz && ay <= locktollerance) {
self.rail.drag = false;
}
else if (ay > dz) self.rail.drag.dl = "v";
}
else if (self.rail.drag.ck == "h") {
if (ay > dz && ax <= locktollerance) {
self.rail.drag = false;
}
else if (ax > dz) self.rail.drag.dl = "h";
}
if (!self.rail.drag.dl) return self.cancelEvent(e);
self.triggerScrollStart(e.clientX, e.clientY, 0, 0, 0);
self.hasmoving = true;
}
if (self.preventclick && !self.preventclick.click) {
self.preventclick.click = self.preventclick.tg.onclick || false;
self.preventclick.tg.onclick = self.onpreventclick;
}
if (self.rail.drag.dl) {
if (self.rail.drag.dl == "v") nx = self.rail.drag.sl;
else if (self.rail.drag.dl == "h") ny = self.rail.drag.st;
}
self.synched("touchmove", function () {
if (self.rail.drag && (self.rail.drag.pt == 2)) {
if (self.prepareTransition) self.resetTransition();
if (self.rail.scrollable) self.setScrollTop(ny);
self.scrollmom.update(fx, fy);
if (self.railh && self.railh.scrollable) {
self.setScrollLeft(nx);
self.showCursor(ny, nx);
} else {
self.showCursor(ny);
}
if (cap.isie10) _doc.selection.clear();
}
});
return self.cancelEvent(e);
}
else if (self.rail.drag.pt == 1) { // drag on cursor
return self.onmousemove(e);
}
};
self.ontouchstartCursor = function (e, hronly) {
if (self.rail.drag && self.rail.drag.pt != 3) return;
if (self.locked) return self.cancelEvent(e);
self.cancelScroll();
self.rail.drag = {
x: e.touches[0].clientX,
y: e.touches[0].clientY,
sx: self.scroll.x,
sy: self.scroll.y,
pt: 3,
hr: (!!hronly)
};
var tg = self.getTarget(e);
if (!self.ispage && cap.hasmousecapture) tg.setCapture();
if (self.isiframe && !cap.hasmousecapture) {
self.saved.csspointerevents = self.doc.css("pointer-events");
self.css(self.doc, { "pointer-events": "none" });
}
return self.cancelEvent(e);
};
self.ontouchendCursor = function (e) {
if (self.rail.drag) {
if (cap.hasmousecapture) _doc.releaseCapture();
if (self.isiframe && !cap.hasmousecapture) self.doc.css("pointer-events", self.saved.csspointerevents);
if (self.rail.drag.pt != 3) return;
self.rail.drag = false;
return self.cancelEvent(e);
}
};
self.ontouchmoveCursor = function (e) {
if (self.rail.drag) {
if (self.rail.drag.pt != 3) return;
self.cursorfreezed = true;
if (self.rail.drag.hr) {
self.scroll.x = self.rail.drag.sx + (e.touches[0].clientX - self.rail.drag.x);
if (self.scroll.x < 0) self.scroll.x = 0;
var mw = self.scrollvaluemaxw;
if (self.scroll.x > mw) self.scroll.x = mw;
} else {
self.scroll.y = self.rail.drag.sy + (e.touches[0].clientY - self.rail.drag.y);
if (self.scroll.y < 0) self.scroll.y = 0;
var my = self.scrollvaluemax;
if (self.scroll.y > my) self.scroll.y = my;
}
self.synched('touchmove', function () {
if (self.rail.drag && (self.rail.drag.pt == 3)) {
self.showCursor();
if (self.rail.drag.hr) self.doScrollLeft(Math.round(self.scroll.x * self.scrollratio.x), opt.cursordragspeed);
else self.doScrollTop(Math.round(self.scroll.y * self.scrollratio.y), opt.cursordragspeed);
}
});
return self.cancelEvent(e);
}
};
}
self.onmousedown = function (e, hronly) {
if (self.rail.drag && self.rail.drag.pt != 1) return;
if (self.railslocked) return self.cancelEvent(e);
self.cancelScroll();
self.rail.drag = {
x: e.clientX,
y: e.clientY,
sx: self.scroll.x,
sy: self.scroll.y,
pt: 1,
hr: hronly || false
};
var tg = self.getTarget(e);
if (cap.hasmousecapture) tg.setCapture();
if (self.isiframe && !cap.hasmousecapture) {
self.saved.csspointerevents = self.doc.css("pointer-events");
self.css(self.doc, {
"pointer-events": "none"
});
}
self.hasmoving = false;
return self.cancelEvent(e);
};
self.onmouseup = function