UNPKG

vue-scrollbars

Version:

A light vue scrollbar comes from jquery.scrollbar.js

1,435 lines (1,233 loc) 150 kB
(function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); else if(typeof define === 'function' && define.amd) define([], factory); else if(typeof exports === 'object') exports["Vuescrollbars"] = factory(); else root["Vuescrollbars"] = factory(); })(this, function() { return /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) { /******/ return installedModules[moduleId].exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ i: moduleId, /******/ l: false, /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ /******/ // Flag the module as loaded /******/ module.l = true; /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /******/ /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ /******/ // define getter function for harmony exports /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { /******/ Object.defineProperty(exports, name, { /******/ configurable: false, /******/ enumerable: true, /******/ get: getter /******/ }); /******/ } /******/ }; /******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? /******/ function getDefault() { return module['default']; } : /******/ function getModuleExports() { return module; }; /******/ __webpack_require__.d(getter, 'a', getter); /******/ return getter; /******/ }; /******/ /******/ // Object.prototype.hasOwnProperty.call /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; /******/ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ /******/ // Load entry module and return exports /******/ return __webpack_require__(__webpack_require__.s = 251); /******/ }) /************************************************************************/ /******/ ([ /* 0 */, /* 1 */, /* 2 */, /* 3 */, /* 4 */, /* 5 */, /* 6 */ /***/ (function(module, exports) { var core = module.exports = { version: '2.5.1' }; if (typeof __e == 'number') __e = core; // eslint-disable-line no-undef /***/ }), /* 7 */ /***/ (function(module, exports, __webpack_require__) { var store = __webpack_require__(59)('wks'); var uid = __webpack_require__(44); var Symbol = __webpack_require__(8).Symbol; var USE_SYMBOL = typeof Symbol == 'function'; var $exports = module.exports = function (name) { return store[name] || (store[name] = USE_SYMBOL && Symbol[name] || (USE_SYMBOL ? Symbol : uid)('Symbol.' + name)); }; $exports.store = store; /***/ }), /* 8 */ /***/ (function(module, exports) { // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028 var global = module.exports = typeof window != 'undefined' && window.Math == Math ? window : typeof self != 'undefined' && self.Math == Math ? self // eslint-disable-next-line no-new-func : Function('return this')(); if (typeof __g == 'number') __g = global; // eslint-disable-line no-undef /***/ }), /* 9 */ /***/ (function(module, exports, __webpack_require__) { var anObject = __webpack_require__(21); var IE8_DOM_DEFINE = __webpack_require__(85); var toPrimitive = __webpack_require__(52); var dP = Object.defineProperty; exports.f = __webpack_require__(10) ? Object.defineProperty : function defineProperty(O, P, Attributes) { anObject(O); P = toPrimitive(P, true); anObject(Attributes); if (IE8_DOM_DEFINE) try { return dP(O, P, Attributes); } catch (e) { /* empty */ } if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported!'); if ('value' in Attributes) O[P] = Attributes.value; return O; }; /***/ }), /* 10 */ /***/ (function(module, exports, __webpack_require__) { // Thank's IE8 for his funny defineProperty module.exports = !__webpack_require__(18)(function () { return Object.defineProperty({}, 'a', { get: function () { return 7; } }).a != 7; }); /***/ }), /* 11 */, /* 12 */, /* 13 */, /* 14 */ /***/ (function(module, exports, __webpack_require__) { var global = __webpack_require__(8); var core = __webpack_require__(6); var ctx = __webpack_require__(30); var hide = __webpack_require__(16); var PROTOTYPE = 'prototype'; var $export = function (type, name, source) { var IS_FORCED = type & $export.F; var IS_GLOBAL = type & $export.G; var IS_STATIC = type & $export.S; var IS_PROTO = type & $export.P; var IS_BIND = type & $export.B; var IS_WRAP = type & $export.W; var exports = IS_GLOBAL ? core : core[name] || (core[name] = {}); var expProto = exports[PROTOTYPE]; var target = IS_GLOBAL ? global : IS_STATIC ? global[name] : (global[name] || {})[PROTOTYPE]; var key, own, out; if (IS_GLOBAL) source = name; for (key in source) { // contains in native own = !IS_FORCED && target && target[key] !== undefined; if (own && key in exports) continue; // export native or passed out = own ? target[key] : source[key]; // prevent global pollution for namespaces exports[key] = IS_GLOBAL && typeof target[key] != 'function' ? source[key] // bind timers to global for call from export context : IS_BIND && own ? ctx(out, global) // wrap global constructors for prevent change them in library : IS_WRAP && target[key] == out ? (function (C) { var F = function (a, b, c) { if (this instanceof C) { switch (arguments.length) { case 0: return new C(); case 1: return new C(a); case 2: return new C(a, b); } return new C(a, b, c); } return C.apply(this, arguments); }; F[PROTOTYPE] = C[PROTOTYPE]; return F; // make static versions for prototype methods })(out) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out; // export proto methods to core.%CONSTRUCTOR%.methods.%NAME% if (IS_PROTO) { (exports.virtual || (exports.virtual = {}))[key] = out; // export proto methods to core.%CONSTRUCTOR%.prototype.%NAME% if (type & $export.R && expProto && !expProto[key]) hide(expProto, key, out); } } }; // type bitmap $export.F = 1; // forced $export.G = 2; // global $export.S = 4; // static $export.P = 8; // proto $export.B = 16; // bind $export.W = 32; // wrap $export.U = 64; // safe $export.R = 128; // real proto method for `library` module.exports = $export; /***/ }), /* 15 */, /* 16 */ /***/ (function(module, exports, __webpack_require__) { var dP = __webpack_require__(9); var createDesc = __webpack_require__(43); module.exports = __webpack_require__(10) ? function (object, key, value) { return dP.f(object, key, createDesc(1, value)); } : function (object, key, value) { object[key] = value; return object; }; /***/ }), /* 17 */ /***/ (function(module, exports) { module.exports = function (it) { return typeof it === 'object' ? it !== null : typeof it === 'function'; }; /***/ }), /* 18 */ /***/ (function(module, exports) { module.exports = function (exec) { try { return !!exec(); } catch (e) { return true; } }; /***/ }), /* 19 */ /***/ (function(module, exports) { var hasOwnProperty = {}.hasOwnProperty; module.exports = function (it, key) { return hasOwnProperty.call(it, key); }; /***/ }), /* 20 */, /* 21 */ /***/ (function(module, exports, __webpack_require__) { var isObject = __webpack_require__(17); module.exports = function (it) { if (!isObject(it)) throw TypeError(it + ' is not an object!'); return it; }; /***/ }), /* 22 */ /***/ (function(module, exports, __webpack_require__) { // to indexed object, toObject with fallback for non-array-like ES3 strings var IObject = __webpack_require__(53); var defined = __webpack_require__(55); module.exports = function (it) { return IObject(defined(it)); }; /***/ }), /* 23 */, /* 24 */, /* 25 */, /* 26 */, /* 27 */, /* 28 */, /* 29 */, /* 30 */ /***/ (function(module, exports, __webpack_require__) { // optional / simple context binding var aFunction = __webpack_require__(84); module.exports = function (fn, that, length) { aFunction(fn); if (that === undefined) return fn; switch (length) { case 1: return function (a) { return fn.call(that, a); }; case 2: return function (a, b) { return fn.call(that, a, b); }; case 3: return function (a, b, c) { return fn.call(that, a, b, c); }; } return function (/* ...args */) { return fn.apply(that, arguments); }; }; /***/ }), /* 31 */ /***/ (function(module, exports, __webpack_require__) { // 19.1.2.14 / 15.2.3.14 Object.keys(O) var $keys = __webpack_require__(87); var enumBugKeys = __webpack_require__(60); module.exports = Object.keys || function keys(O) { return $keys(O, enumBugKeys); }; /***/ }), /* 32 */ /***/ (function(module, exports, __webpack_require__) { // 7.1.13 ToObject(argument) var defined = __webpack_require__(55); module.exports = function (it) { return Object(defined(it)); }; /***/ }), /* 33 */ /***/ (function(module, exports) { module.exports = {}; /***/ }), /* 34 */, /* 35 */, /* 36 */, /* 37 */, /* 38 */, /* 39 */, /* 40 */, /* 41 */, /* 42 */, /* 43 */ /***/ (function(module, exports) { module.exports = function (bitmap, value) { return { enumerable: !(bitmap & 1), configurable: !(bitmap & 2), writable: !(bitmap & 4), value: value }; }; /***/ }), /* 44 */ /***/ (function(module, exports) { var id = 0; var px = Math.random(); module.exports = function (key) { return 'Symbol('.concat(key === undefined ? '' : key, ')_', (++id + px).toString(36)); }; /***/ }), /* 45 */ /***/ (function(module, exports) { exports.f = {}.propertyIsEnumerable; /***/ }), /* 46 */ /***/ (function(module, exports, __webpack_require__) { var def = __webpack_require__(9).f; var has = __webpack_require__(19); var TAG = __webpack_require__(7)('toStringTag'); module.exports = function (it, tag, stat) { if (it && !has(it = stat ? it : it.prototype, TAG)) def(it, TAG, { configurable: true, value: tag }); }; /***/ }), /* 47 */ /***/ (function(module, exports, __webpack_require__) { var ctx = __webpack_require__(30); var call = __webpack_require__(152); var isArrayIter = __webpack_require__(153); var anObject = __webpack_require__(21); var toLength = __webpack_require__(56); var getIterFn = __webpack_require__(154); var BREAK = {}; var RETURN = {}; var exports = module.exports = function (iterable, entries, fn, that, ITERATOR) { var iterFn = ITERATOR ? function () { return iterable; } : getIterFn(iterable); var f = ctx(fn, that, entries ? 2 : 1); var index = 0; var length, step, iterator, result; if (typeof iterFn != 'function') throw TypeError(iterable + ' is not iterable!'); // fast case for arrays with default iterator if (isArrayIter(iterFn)) for (length = toLength(iterable.length); length > index; index++) { result = entries ? f(anObject(step = iterable[index])[0], step[1]) : f(iterable[index]); if (result === BREAK || result === RETURN) return result; } else for (iterator = iterFn.call(iterable); !(step = iterator.next()).done;) { result = call(iterator, f, step.value, entries); if (result === BREAK || result === RETURN) return result; } }; exports.BREAK = BREAK; exports.RETURN = RETURN; /***/ }), /* 48 */, /* 49 */, /* 50 */, /* 51 */, /* 52 */ /***/ (function(module, exports, __webpack_require__) { // 7.1.1 ToPrimitive(input [, PreferredType]) var isObject = __webpack_require__(17); // instead of the ES6 spec version, we didn't implement @@toPrimitive case // and the second argument - flag - preferred type is a string module.exports = function (it, S) { if (!isObject(it)) return it; var fn, val; if (S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it))) return val; if (typeof (fn = it.valueOf) == 'function' && !isObject(val = fn.call(it))) return val; if (!S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it))) return val; throw TypeError("Can't convert object to primitive value"); }; /***/ }), /* 53 */ /***/ (function(module, exports, __webpack_require__) { // fallback for non-array-like ES3 and non-enumerable old V8 strings var cof = __webpack_require__(54); // eslint-disable-next-line no-prototype-builtins module.exports = Object('z').propertyIsEnumerable(0) ? Object : function (it) { return cof(it) == 'String' ? it.split('') : Object(it); }; /***/ }), /* 54 */ /***/ (function(module, exports) { var toString = {}.toString; module.exports = function (it) { return toString.call(it).slice(8, -1); }; /***/ }), /* 55 */ /***/ (function(module, exports) { // 7.2.1 RequireObjectCoercible(argument) module.exports = function (it) { if (it == undefined) throw TypeError("Can't call method on " + it); return it; }; /***/ }), /* 56 */ /***/ (function(module, exports, __webpack_require__) { // 7.1.15 ToLength var toInteger = __webpack_require__(57); var min = Math.min; module.exports = function (it) { return it > 0 ? min(toInteger(it), 0x1fffffffffffff) : 0; // pow(2, 53) - 1 == 9007199254740991 }; /***/ }), /* 57 */ /***/ (function(module, exports) { // 7.1.4 ToInteger var ceil = Math.ceil; var floor = Math.floor; module.exports = function (it) { return isNaN(it = +it) ? 0 : (it > 0 ? floor : ceil)(it); }; /***/ }), /* 58 */ /***/ (function(module, exports, __webpack_require__) { var shared = __webpack_require__(59)('keys'); var uid = __webpack_require__(44); module.exports = function (key) { return shared[key] || (shared[key] = uid(key)); }; /***/ }), /* 59 */ /***/ (function(module, exports, __webpack_require__) { var global = __webpack_require__(8); var SHARED = '__core-js_shared__'; var store = global[SHARED] || (global[SHARED] = {}); module.exports = function (key) { return store[key] || (store[key] = {}); }; /***/ }), /* 60 */ /***/ (function(module, exports) { // IE 8- don't enum bug keys module.exports = ( 'constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf' ).split(','); /***/ }), /* 61 */ /***/ (function(module, exports) { exports.f = Object.getOwnPropertySymbols; /***/ }), /* 62 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var LIBRARY = __webpack_require__(63); var $export = __webpack_require__(14); var redefine = __webpack_require__(93); var hide = __webpack_require__(16); var has = __webpack_require__(19); var Iterators = __webpack_require__(33); var $iterCreate = __webpack_require__(145); var setToStringTag = __webpack_require__(46); var getPrototypeOf = __webpack_require__(94); var ITERATOR = __webpack_require__(7)('iterator'); var BUGGY = !([].keys && 'next' in [].keys()); // Safari has buggy iterators w/o `next` var FF_ITERATOR = '@@iterator'; var KEYS = 'keys'; var VALUES = 'values'; var returnThis = function () { return this; }; module.exports = function (Base, NAME, Constructor, next, DEFAULT, IS_SET, FORCED) { $iterCreate(Constructor, NAME, next); var getMethod = function (kind) { if (!BUGGY && kind in proto) return proto[kind]; switch (kind) { case KEYS: return function keys() { return new Constructor(this, kind); }; case VALUES: return function values() { return new Constructor(this, kind); }; } return function entries() { return new Constructor(this, kind); }; }; var TAG = NAME + ' Iterator'; var DEF_VALUES = DEFAULT == VALUES; var VALUES_BUG = false; var proto = Base.prototype; var $native = proto[ITERATOR] || proto[FF_ITERATOR] || DEFAULT && proto[DEFAULT]; var $default = $native || getMethod(DEFAULT); var $entries = DEFAULT ? !DEF_VALUES ? $default : getMethod('entries') : undefined; var $anyNative = NAME == 'Array' ? proto.entries || $native : $native; var methods, key, IteratorPrototype; // Fix native if ($anyNative) { IteratorPrototype = getPrototypeOf($anyNative.call(new Base())); if (IteratorPrototype !== Object.prototype && IteratorPrototype.next) { // Set @@toStringTag to native iterators setToStringTag(IteratorPrototype, TAG, true); // fix for some old engines if (!LIBRARY && !has(IteratorPrototype, ITERATOR)) hide(IteratorPrototype, ITERATOR, returnThis); } } // fix Array#{values, @@iterator}.name in V8 / FF if (DEF_VALUES && $native && $native.name !== VALUES) { VALUES_BUG = true; $default = function values() { return $native.call(this); }; } // Define iterator if ((!LIBRARY || FORCED) && (BUGGY || VALUES_BUG || !proto[ITERATOR])) { hide(proto, ITERATOR, $default); } // Plug for library Iterators[NAME] = $default; Iterators[TAG] = returnThis; if (DEFAULT) { methods = { values: DEF_VALUES ? $default : getMethod(VALUES), keys: IS_SET ? $default : getMethod(KEYS), entries: $entries }; if (FORCED) for (key in methods) { if (!(key in proto)) redefine(proto, key, methods[key]); } else $export($export.P + $export.F * (BUGGY || VALUES_BUG), NAME, methods); } return methods; }; /***/ }), /* 63 */ /***/ (function(module, exports) { module.exports = true; /***/ }), /* 64 */ /***/ (function(module, exports, __webpack_require__) { // 19.1.2.2 / 15.2.3.5 Object.create(O [, Properties]) var anObject = __webpack_require__(21); var dPs = __webpack_require__(146); var enumBugKeys = __webpack_require__(60); var IE_PROTO = __webpack_require__(58)('IE_PROTO'); var Empty = function () { /* empty */ }; var PROTOTYPE = 'prototype'; // Create object with fake `null` prototype: use iframe Object with cleared prototype var createDict = function () { // Thrash, waste and sodomy: IE GC bug var iframe = __webpack_require__(86)('iframe'); var i = enumBugKeys.length; var lt = '<'; var gt = '>'; var iframeDocument; iframe.style.display = 'none'; __webpack_require__(147).appendChild(iframe); iframe.src = 'javascript:'; // eslint-disable-line no-script-url // createDict = iframe.contentWindow.Object; // html.removeChild(iframe); iframeDocument = iframe.contentWindow.document; iframeDocument.open(); iframeDocument.write(lt + 'script' + gt + 'document.F=Object' + lt + '/script' + gt); iframeDocument.close(); createDict = iframeDocument.F; while (i--) delete createDict[PROTOTYPE][enumBugKeys[i]]; return createDict(); }; module.exports = Object.create || function create(O, Properties) { var result; if (O !== null) { Empty[PROTOTYPE] = anObject(O); result = new Empty(); Empty[PROTOTYPE] = null; // add "__proto__" for Object.getPrototypeOf polyfill result[IE_PROTO] = O; } else result = createDict(); return Properties === undefined ? result : dPs(result, Properties); }; /***/ }), /* 65 */ /***/ (function(module, exports, __webpack_require__) { var META = __webpack_require__(44)('meta'); var isObject = __webpack_require__(17); var has = __webpack_require__(19); var setDesc = __webpack_require__(9).f; var id = 0; var isExtensible = Object.isExtensible || function () { return true; }; var FREEZE = !__webpack_require__(18)(function () { return isExtensible(Object.preventExtensions({})); }); var setMeta = function (it) { setDesc(it, META, { value: { i: 'O' + ++id, // object ID w: {} // weak collections IDs } }); }; var fastKey = function (it, create) { // return primitive with prefix if (!isObject(it)) return typeof it == 'symbol' ? it : (typeof it == 'string' ? 'S' : 'P') + it; if (!has(it, META)) { // can't set metadata to uncaught frozen object if (!isExtensible(it)) return 'F'; // not necessary to add metadata if (!create) return 'E'; // add missing metadata setMeta(it); // return object ID } return it[META].i; }; var getWeak = function (it, create) { if (!has(it, META)) { // can't set metadata to uncaught frozen object if (!isExtensible(it)) return true; // not necessary to add metadata if (!create) return false; // add missing metadata setMeta(it); // return hash weak collections IDs } return it[META].w; }; // add metadata on freeze-family methods calling var onFreeze = function (it) { if (FREEZE && meta.NEED && isExtensible(it) && !has(it, META)) setMeta(it); return it; }; var meta = module.exports = { KEY: META, NEED: false, fastKey: fastKey, getWeak: getWeak, onFreeze: onFreeze }; /***/ }), /* 66 */ /***/ (function(module, exports, __webpack_require__) { exports.f = __webpack_require__(7); /***/ }), /* 67 */ /***/ (function(module, exports, __webpack_require__) { var global = __webpack_require__(8); var core = __webpack_require__(6); var LIBRARY = __webpack_require__(63); var wksExt = __webpack_require__(66); var defineProperty = __webpack_require__(9).f; module.exports = function (name) { var $Symbol = core.Symbol || (core.Symbol = LIBRARY ? {} : global.Symbol || {}); if (name.charAt(0) != '_' && !(name in $Symbol)) defineProperty($Symbol, name, { value: wksExt.f(name) }); }; /***/ }), /* 68 */, /* 69 */, /* 70 */, /* 71 */, /* 72 */, /* 73 */, /* 74 */, /* 75 */, /* 76 */, /* 77 */, /* 78 */, /* 79 */, /* 80 */, /* 81 */, /* 82 */, /* 83 */ /***/ (function(module, exports, __webpack_require__) { module.exports = { "default": __webpack_require__(130), __esModule: true }; /***/ }), /* 84 */ /***/ (function(module, exports) { module.exports = function (it) { if (typeof it != 'function') throw TypeError(it + ' is not a function!'); return it; }; /***/ }), /* 85 */ /***/ (function(module, exports, __webpack_require__) { module.exports = !__webpack_require__(10) && !__webpack_require__(18)(function () { return Object.defineProperty(__webpack_require__(86)('div'), 'a', { get: function () { return 7; } }).a != 7; }); /***/ }), /* 86 */ /***/ (function(module, exports, __webpack_require__) { var isObject = __webpack_require__(17); var document = __webpack_require__(8).document; // typeof document.createElement is 'object' in old IE var is = isObject(document) && isObject(document.createElement); module.exports = function (it) { return is ? document.createElement(it) : {}; }; /***/ }), /* 87 */ /***/ (function(module, exports, __webpack_require__) { var has = __webpack_require__(19); var toIObject = __webpack_require__(22); var arrayIndexOf = __webpack_require__(133)(false); var IE_PROTO = __webpack_require__(58)('IE_PROTO'); module.exports = function (object, names) { var O = toIObject(object); var i = 0; var result = []; var key; for (key in O) if (key != IE_PROTO) has(O, key) && result.push(key); // Don't enum bug & hidden keys while (names.length > i) if (has(O, key = names[i++])) { ~arrayIndexOf(result, key) || result.push(key); } return result; }; /***/ }), /* 88 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _keys = __webpack_require__(89); var _keys2 = _interopRequireDefault(_keys); var _classCallCheck2 = __webpack_require__(137); var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); var _createClass2 = __webpack_require__(138); var _createClass3 = _interopRequireDefault(_createClass2); var _assign = __webpack_require__(83); var _assign2 = _interopRequireDefault(_assign); var _set = __webpack_require__(142); var _set2 = _interopRequireDefault(_set); var _util = __webpack_require__(167); var _util2 = _interopRequireDefault(_util); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var BROWSER = { body: document.querySelector('body'), data: { index: 0, name: 'scrollbar' }, firefox: /firefox/i.test(navigator.userAgent), macosx: /mac/i.test(navigator.platform), msedge: /edge\/\d+/i.test(navigator.userAgent), msie: /(msie|trident)/i.test(navigator.userAgent), mobile: /android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent), overlay: null, // check if browser overlays scrollbar which means the scrollbars totally floated scroll: null, // restore browser scrollbar size info:scrollbar size scrolls: new _set2.default(), // restore mutiple instance of Scrollbar webkit: /webkit/i.test(navigator.userAgent) && !/edge\/\d+/i.test(navigator.userAgent) }; var DEFAULTS = { autoScrollSize: true, // automatically calculate scrollsize autoUpdate: true, // update scrollbar if content/container size changed debug: false, // debug mode disableBodyScroll: false, // disable body scroll if mouse over container duration: 200, // scroll animate duration in ms ignoreMobile: false, // ignore mobile devices ignoreOverlay: false, // ignore browsers with overlay scrollbars (mobile, MacOS) isRtl: false, // is RTL scrollStep: 30, // scroll step for scrollbar arrows showArrows: false, // add class to show arrows stepScrolling: true, // when scrolling to scrollbar mousedown position scrollx: null, // horizontal scroll element scrolly: null, // vertical scroll element onDestroy: null, // callback function on destroy, onFallback: null, // callback function if scrollbar is not initialized onInit: null, // callback function on first initialization onScroll: null, // callback function on content scrolling onUpdate: null // callback function on init/resize (before scrollbar size calculation }; var BAR_TYPES = { advanced: function advanced() { // [ // For picture bar // '<div class="scroll-element">', // '<div class="scroll-element_corner"></div>', // '<div class="scroll-arrow scroll-arrow_less"></div>', // '<div class="scroll-arrow scroll-arrow_more"></div>', // '<div class="scroll-element_outer">', // '<div class="scroll-element_size"></div>', // required! used for scrollbar size calculation ! // '<div class="scroll-element_inner-wrapper">', // '<div class="scroll-element_inner scroll-element_track">', // used for handling scrollbar click // '<div class="scroll-element_inner-bottom"></div>', // '</div>', // '</div>', // '<div class="scroll-bar">', // required // '<div class="scroll-bar_body">', // '<div class="scroll-bar_body-inner"></div>', // '</div>', // '<div class="scroll-bar_bottom"></div>', // '<div class="scroll-bar_center"></div>', // '</div>', // '</div>', // '</div>' // ].join(''); var el = document.createElement('div'); util.addClass(el, 'scroll-element'); var el4corner = document.createElement('div'); util.addClass(el4corner, 'scroll-element_corner'); var el4arrowless = document.createElement('div'); util.addClass(el4arrowless, 'scroll-arrow scroll-element-arrow_less'); var el4arrowmore = document.createElement('div'); util.addClass(el4arrowmore, 'scroll-arrow scroll-element-arrow_more'); var el4outer = document.createElement('div'); util.addClass(el4outer, 'scroll-element_outer'); var el4size = document.createElement('div'); util.addClass(el4size, 'scroll-element_size'); var el4innerwrapper = document.createElement('div'); util.addClass(el4innerwrapper, 'scroll-element-inner_wrapper'); var el4inner = document.createElement('div'); util.addClass(el4inner, 'scroll-element-inner scroll-element_track'); var el4innerbottom = document.createElement('div'); util.addClass(el4innerbottom, 'scroll-element-inner_bottom'); var el4bar = document.createElement('div'); util.addClass(el4bar, 'scroll-element-bar'); var el4barbody = document.createElement('div'); util.addClass(el4barbody, 'scroll-element-bar_body'); var el4barbodyinner = document.createElement('div'); util.addClass(el4barbodyinner, 'scroll-element-bar_body-inner'); var el4bottom = document.createElement('div'); util.addClass(el4bottom, 'scroll-element-bottom'); var el4center = document.createElement('div'); util.addClass(el4center, 'scroll-element-center'); el4barbody.appendChild(el4barbodyinner); el4bar.appendChild(el4barbody); el4bar.appendChild(el4bottom); el4bar.appendChild(el4center); el4inner.appendChild(el4innerbottom); el4innerwrapper.appendChild(el4inner); el4outer.appendChild(el4size); el4outer.appendChild(el4innerwrapper); el4outer.appendChild(el4bar); el.appendChild(el4corner); el.appendChild(el4arrowless); el.appendChild(el4arrowmore); el.appendChild(el4outer); return el; }, simple: function simple() { // [ // '<div class="scroll-element">', // '<div class="scroll-element_outer">', // '<div class="scroll-element_size"></div>', // required! used for scrollbar size calculation ! // '<div class="scroll-element_track"></div>', // used for handling scrollbar click // '<div class="scroll-bar"></div>', // required // '</div>', // '</div>' // ].join('') var el = document.createElement('div'); util.addClass(el, 'scroll-element'); var el4outer = document.createElement('div'); util.addClass(el4outer, 'scroll-element_outer'); var el4size = document.createElement('div'); util.addClass(el4size, 'scroll-element_size'); var el4track = document.createElement('div'); util.addClass(el4track, 'scroll-element_track'); var el4bar = document.createElement('div'); util.addClass(el4bar, 'scroll-bar'); el.appendChild(el4outer); el4outer.appendChild(el4size); el4outer.appendChild(el4track); el4outer.appendChild(el4bar); return el; } }; var util = (0, _assign2.default)(_util2.default, { /* ADDITIONAL FUNCTIONS */ /** * Get native browser scrollbar size (height/width) * * @param {Boolean} actual size or CSS size, default - CSS size * @returns {Object} with height, width */ getBrowserScrollSize: function getBrowserScrollSize(actualSize) { if (BROWSER.webkit && !actualSize) { return { height: 0, width: 0 }; } if (!BROWSER.data.outer) { var css = { 'border': 'none', 'box-sizing': 'content-box', 'height': '200px', 'margin': '0', 'padding': '0', 'width': '200px' }; BROWSER.data.inner = document.createElement('div'); util.css(BROWSER.data.inner, css); var outerCSS = (0, _assign2.default)({ 'left': '-1000px', 'overflow': 'scroll', 'position': 'absolute', 'top': '-1000px' }, css); BROWSER.data.outer = document.createElement('div'); util.css(BROWSER.data.outer, outerCSS); BROWSER.data.outer.appendChild(BROWSER.data.inner); BROWSER.body = BROWSER.body || document.querySelector('body'); BROWSER.body.appendChild(BROWSER.data.outer); } BROWSER.data.outer.scrollLeft = 1000; BROWSER.data.outer.scrollTop = 1000; var offsetInner = util.offset(BROWSER.data.inner); var offsetOuter = util.offset(BROWSER.data.outer); return { height: Math.ceil(offsetOuter.top - offsetInner.top || 0), width: Math.ceil(offsetOuter.left - offsetInner.left || 0) }; }, /** * Check if native browser scrollbars overlay content * * @returns {Boolean} */ isScrollOverlaysContent: function isScrollOverlaysContent() { var scrollSize = this.getBrowserScrollSize(true); return !(scrollSize.height || scrollSize.width); }, isVerticalScroll: function isVerticalScroll(event) { var e = event; if (e.axis && e.axis === e.HORIZONTAL_AXIS) { return false; } if (e.wheelDeltaX) { return false; } return true; }, storeHandlers: function storeHandlers(inst, eventName, element, handler) { inst._handlers.add({ eventName: eventName, element: element, handler: handler }); }, removeHanlders: function removeHanlders(inst) { inst._handlers.forEach(function (bean) { util.removeEvent(bean.element, bean.eventName, bean.handler); }); }, storeScrollHandlers: function storeScrollHandlers(inst, eventName, element, handler) { inst._disabledScrollHandlers.add({ eventName: eventName, element: element, handler: handler }); }, removeScrollHanlders: function removeScrollHanlders(inst) { inst._disabledScrollHandlers.forEach(function (bean) { util.removeEvent(bean.element, bean.eventName, bean.handler); }); } }); var debug = false; /** * Check if scroll content/container size is changed */ var updateScrollbars = function () { var timer = null, timerCounter = 0; return function (force) { BROWSER.scrolls.forEach(function (inst) { var options = inst.options; var el = inst.el; var wrapper = inst.wrapper; var scrollx = inst.scrollx; var scrolly = inst.scrolly; if (force || options.autoUpdate && wrapper && util.isVisible(wrapper) && (el.scrollWidth != scrollx.size || el.scrollHeight != scrolly.size || wrapper.clientWidth != scrollx.visible || wrapper.clientHeight != scrolly.visible)) { inst.update(); if (options.debug) { window.console && console.log({ scrollHeight: el.scrollHeight + ':' + scrolly.size, scrollWidth: el.scrollWidth + ':' + scrollx.size, visibleHeight: wrapper.clientHeight + ':' + scrolly.visible, visibleWidth: wrapper.clientWidth + ':' + scrollx.visible }, true); timerCounter++; } } }); if (debug && timerCounter > 10) { window.console && console.log('Scroll updates exceed 10'); updateScrollbars = function updateScrollbars() {}; } else { clearTimeout(timer); timer = setTimeout(updateScrollbars, 300); } }; }(); var Scrollbar = function () { function Scrollbar(el, wrapper) { (0, _classCallCheck3.default)(this, Scrollbar); this.el = this.container = el; this.ns = '.scrollbar_' + BROWSER.data.index++; this._originalWrapper = wrapper; this.options = null; this.scrollx = {}; // horizional bar this.scrolly = {}; // vertical bar this._handlers = new _set2.default(); // restore event handlers which would be removed on destroy this._disabledScrollHandlers = new _set2.default(); el.__instance = this; if (!BROWSER.scroll) { BROWSER.overlay = util.isScrollOverlaysContent(); BROWSER.scroll = util.getBrowserScrollSize(); // monit scrollbar size changed updateScrollbars(); // add global resize listener var resize = util.throttle(function (e) { var force = false; if (BROWSER.scroll && (BROWSER.scroll.height || BROWSER.scroll.width)) { var currentScroll = util.getBrowserScrollSize(); if (currentScroll.height != BROWSER.scroll.height || currentScroll.width != BROWSER.scroll.width) { force = true; BROWSER.scroll = currentScroll; } } updateScrollbars(force); }); util.addEvent(window, 'resize', resize); util.storeHandlers(this, 'resize', window, resize); } BROWSER.scrolls.add(this); } (0, _createClass3.default)(Scrollbar, [{ key: 'init', value: function init(options) { var self = this; var el = self.el; var cw = self.containerWrapper || el; var wrapper = self.wrapper; var bar = { x: self.scrollx, y: self.scrolly }; var initScroll = { scrollLeft: self.el.scrollLeft, scrollTop: self.el.scrollTop }; options = self.options = util.extend(true, {}, DEFAULTS, options); // first init // render dom structure wrapper = self.wrapper = self._originalWrapper || document.createElement('div'); ['scroll-wrapper', util.attr(el, 'class')].join(' ').split(/\s/).forEach(function (className) { return util.addClass(wrapper, className); }); util.css(wrapper, { position: util.css(el, 'position') === 'absolute' ? 'absolute' : 'relative' }); !self._originalWrapper && util.insertBefore(wrapper, el).appendChild(el); if (options.isRTL) { util.addClass(wrapper, 'scroll--rtl'); } // check if textarea if (el.tagName.toLowerCase() === 'textarea') { cw = self.containerWrapper = document.createElement('div'); util.insertBefore(cw, el).appendChild(el); util.addClass(wrapper, 'scroll-textarea'); } var css = { height: 'auto', 'max-height': '', 'margin-bottom': BROWSER.scroll.height * -1 + 'px' }; css[options.isRTL ? 'margin-left' : 'margin-right'] = BROWSER.scroll.width * -1 + 'px'; util.addClass(cw, 'scroll-content'); util.css(cw, css); // scroll on el function scroll4el(e) { var scrollLeft = self.el.scrollLeft; var scrollTop = self.el.scrollTop; if (options.isRtl) { // webkit 0:100 // ie/edge 100:0 // firefox -100:0 switch (true) { case BROWSER.firefox: scrollLeft = Math.abs(scrollLeft); case BROWSER.msedge || BROWSER.msie: scrollLeft = self.el.scrollWidth - self.el.clientWidth - scrollLeft; break; } } // onScroll handler if (typeof options.onScroll === 'function') { options.onScroll.call(self, { maxScroll: bar.y.maxScrollOffset, scroll: scrollTop, size: bar.y.size, visible: bar.y.visible }, { maxScroll: bar.x.maxScrollOffset, scroll: scrollLeft, size: bar.x.size, visible: bar.x.visible }); } // TODO - It feels like zombie under IE, need smooth animation bar.x.isVisible && util.css(bar.x.scroll.bar, 'left', scrollLeft * bar.x.ratio + 'px'); bar.y.isVisible && util.css(bar.y.scroll.bar, 'top', scrollTop * bar.y.ratio + 'px'); } util.addEvent(el, 'scroll', scroll4el); util.storeHandlers(self, 'scroll', el, scroll4el); // prevent native scrollbars to be visible on #anchor click function scroll4wrapper(e) { wrapper.scrollTop = 0; wrapper.scrollLeft = 0; } util.addEvent(wrapper, 'scroll', scroll4wrapper); util.storeHandlers(self, 'scroll', wrapper, scroll4wrapper); // if need disable body scroll if (options.disableBodyScroll) { var handleMouseScroll = function handleMouseScroll(event) { util.isVerticalScroll(event) ? bar.y.isVisible && bar.y.mousewheel(event) : bar.x.isVisible && bar.x.mousewheel(event); }; // util.addEvent(wrapper, 'MozMousePixelScroll', handleMouseScroll); util.addEvent(wrapper, 'mousewheel', handleMouseScroll); // util.storeHandlers(self, 'MozMousePixelScroll', wrapper, handleMouseScroll); util.storeHandlers(self, 'mousewheel', wrapper, handleMouseScroll); // util.storeScrollHandlers(self, 'MozMousePixelScroll', wrapper, handleMouseScroll); util.storeScrollHandlers(self, 'mousewheel', wrapper, handleMouseScroll); if (BROWSER.mobile) { var touchstart4wrapper = function touchstart4wrapper(e) { var touch = e.originalEvent.touches && e.originalEvent.touches[0] || e; var originalTouch = { pageX: touch.pageX, pageY: touch.pageY }; var originalScroll = { left: touch.scrollLeft, top: touch.scrollTop }; // touchmove function touchmove4doc(e) { var touch = e.originalEvent.touches && e.originalEvent.touches[0] || e; el.scrollLeft = originalTouch.pageX + originalScroll.left - touch.pageX; el.scrollTop = originalTouch.pageY + originalScroll.top - touch.pageY; e.preventDefault(); } util.addEvent(document, 'touchmove', touchmove4doc); // touchend function touchend4doc(e) { util.removeEvent(wrapper, 'touchstart', touchstart4wrapper); util.removeEvent(document, 'touchmove', touchmove4doc); util.removeEvent(document, 'touchend', touchend4doc); } util.addEvent(document, 'touchend', touchend4doc); }; util.addEvent(wrapper, 'touchstart', touchstart4wrapper); util.storeHandlers(self, 'touchstart', wrapper, touchstart4wrapper); util.storeScrollHandlers(self, 'touchstart', wrapper, touchstart4wrapper); } } // callback for init if (typeof options.onInit === 'function') { options.onInit.call(self, el); } // render bars self._renderBars(bar); // reset styles self._reset4BarCSS(bar); // calc init sizes self._calcInitSize4Bars(bar); // update scrollbar visibility/dimensions self._updateScroll('x', self.scrollx); self._updateScroll('y', self.scrolly); if (typeof options.onUpdate === 'function') { options.onUpdate.apply(self, [self.el]); } // calc scrollbar size self._calcSize4Bars(bar); util.scrollLeft(self.el, initScroll.scrollLeft); util.scrollTop(self.el, initScroll.scrollTop); util.trigger(self.el, 'scroll'); } }, { key: 'update', value: function update(options) { var self = this; var original = self.options; options = self.options = util.extend(true, {}, original, options); var bar = { x: self.scrollx, y: self.scrolly }; var initScroll = { scrollLeft: self.el.scrollLeft, scrollTop: self.el.scrollTop }; var css = { height: 'auto', 'max-height': '', 'margin-bottom': BROWSER.scroll.height * -1 + 'px' }; css[options.isRTL ? 'margin-left' : 'margin-right'] = BROWSER.scroll.width * -1 + 'px'; util.css(self.containerWrapper || self.el, css); // if need disable body scroll if (options.disableBodyScroll && !original.disableBodyScroll) { // add listener var wrapper = self.wrapper; var handleMouseScroll = function handleMouseScroll(event) { util.isVerticalScroll(event) ? bar.y.isVisible && bar.y.mousewheel(event) : bar.x.isVisible && bar.x.mousewheel(event); }; util.addEvent(wrapper, 'MozMousePixelScroll', handleMouseScroll); util.addEvent(wrapper, 'mousewheel', handleMouseScroll); util.storeHandlers(self, 'MozMousePixelScroll', wrapper, handleMouseScroll); util.storeHandlers(self, 'mousewheel', wrapper, handleMouseScroll); util.storeScrollHandlers(self, 'MozMousePixelScroll', wrapper, handleMouseScroll); util.storeScrollHandlers(self, 'mousewheel', wrapper, handleMouseScroll); if (BROWSER.mobile) { var touchstart4wrapper = function touchstart4wrapper(e) { var touch = e.originalEvent.touches && e.originalEvent.touches[0] || e; var originalTouch = { pageX: touch.pageX, pageY: touch.pageY }; var originalScroll = { left: touch.scrollLeft, top: touch.scrollTop }; // touchmove function touchmove4doc(e) { var touch = e.originalEvent.touches && e.originalEvent.touches[0] || e; el.scrollLeft = originalTouch.pageX + originalScroll.left - touch.pageX; el.scrollTop = originalTouch.pageY + originalScroll.top - touch.pageY; e.preventDefault(); } util.addEvent(document, 'touchmove', touchmove4doc); // touchend function touchend4doc(e) { util.removeEvent(wrapper, 'touchstart', touchstart4wrapper); util.removeEvent(document, 'touchmove', touchmove4doc); util.removeEvent(document, 'touchend', touchend4doc); } util.addEvent(document, 'touchend', touchend4doc); }; util.addEvent(wrapper, 'touchstart', touchstart4wrapper); util.storeHandlers(self, 'touchstart', wrapper, touchstart4wrapper); util.storeScrollHandlers(self, 'touchstart', wrapper, touchstart4wrapper); } } else if (!options.disableBodyScroll && original.disableBodyScroll) { // remove listener util.removeScrollHanlders(self); } // render bars self._renderBars(bar); // reset styles self._reset4BarCSS(bar); // calc init sizes self._calcInitSize4Bars(bar);