bkui-vue 1.0.3-beta.60 → 1.0.3-beta.60.scrollbar.3

package/lib/virtual-render/index.js

@@ -3,6 +3,7 @@ import "./virtual-render.less";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__ from "../shared";
 import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__ from "../config-provider";
+import * as __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__ from "vue-types";
 import * as __WEBPACK_EXTERNAL_MODULE_lodash_throttle_a7b7506a__ from "lodash/throttle";
 /******/ // The require scope
 /******/ var __webpack_require__ = {};
@@ -25,6 +26,17 @@ import * as __WEBPACK_EXTERNAL_MODULE_lodash_throttle_a7b7506a__ from "lodash/th
 /******/ 	__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
 /******/ })();
 /******/ 
+/******/ /* webpack/runtime/make namespace object */
+/******/ (() => {
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = (exports) => {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/ })();
+/******/ 
 /************************************************************************/
 var __webpack_exports__ = {};
 
@@ -33,6 +45,17 @@ __webpack_require__.d(__webpack_exports__, {
   "default": () => (/* binding */ src)
 });
 
+// NAMESPACE OBJECT: ../../packages/virtual-render/src/scrollbar-core/helpers.ts
+var helpers_namespaceObject = {};
+__webpack_require__.r(helpers_namespaceObject);
+__webpack_require__.d(helpers_namespaceObject, {
+  addClasses: () => (addClasses),
+  classNamesToQuery: () => (classNamesToQuery),
+  getElementDocument: () => (getElementDocument),
+  getElementWindow: () => (getElementWindow),
+  removeClasses: () => (removeClasses)
+});
+
 ;// CONCATENATED MODULE: external "../shared"
 var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var y = x => () => x
@@ -86,51 +109,2071 @@ function _typeof(o) {
 }
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/toPrimitive.js
 
-function toPrimitive(t, r) {
-  if ("object" != _typeof(t) || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
-    if ("object" != _typeof(i)) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/toPropertyKey.js
+function toPrimitive(t, r) {
+  if ("object" != _typeof(t) || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != _typeof(i)) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/toPropertyKey.js
+
+
+function toPropertyKey(t) {
+  var i = toPrimitive(t, "string");
+  return "symbol" == _typeof(i) ? i : i + "";
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/defineProperty.js
+
+function _defineProperty(obj, key, value) {
+  key = toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+;// CONCATENATED MODULE: external "vue"
+var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_vue_y = x => () => x
+const external_vue_namespaceObject = external_vue_x({ ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["h"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.h, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["onUnmounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onUnmounted, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch });
+;// CONCATENATED MODULE: external "../config-provider"
+var config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var config_provider_y = x => () => x
+const config_provider_namespaceObject = config_provider_x({ ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__.usePrefix });
+;// CONCATENATED MODULE: external "vue-types"
+var external_vue_types_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_vue_types_y = x => () => x
+const external_vue_types_namespaceObject = external_vue_types_x({ ["toType"]: () => __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__.toType });
+;// CONCATENATED MODULE: ../../packages/virtual-render/src/props.ts
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+var EventProps = {
+  onContentScroll: Function
+};
+var virtualRenderProps = _objectSpread({
+  /** 传入原始数据源 */
+  list: shared_namespaceObject.PropTypes.array.def([]),
+  /**
+   * 是否启用此功能
+   * 如果设置为false，则此组件只会渲染两层指定的 容器，默认渲染两层 div
+   * 设置为true才会启用所有的虚拟渲染 & 滚动相关计算
+   * 此属性设置为了兼容需要按需开启\关闭虚拟渲染场景，避免外层设计两套样式架构
+   * Note: 目前此属性不支持动态修改
+   */
+  enabled: shared_namespaceObject.PropTypes.bool.def(true),
+  /**
+   * 是否启用内置的Scroll Listener
+   * 当启用虚拟滚动时（enabled = true），滚动监听为内置生效
+   * 只有当（enabled = false)时此配置项才生效
+   */
+  scrollEvent: shared_namespaceObject.PropTypes.bool.def(false),
+  /**
+   * 每行数据高度
+   * 默认为数值类型，默认高度 30px
+   * 如果每行高度不一致，可为回调函数：(index: number, row: any[]): number => {}
+   * 函数参数为当前行index & 当前行数据 row，row为数组，当不分组时，为当前行item
+   * 如果有分组展示， index 为当前分组 index， row为数组，当前行分组所有 item 数据
+   */
+  lineHeight: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.number, shared_namespaceObject.PropTypes.func]).def(30),
+  /** 整体最小高度 */
+  minHeight: shared_namespaceObject.PropTypes.number.def(30),
+  /** 整体最大高度 */
+  maxHeight: shared_namespaceObject.PropTypes.number,
+  /**
+   * 整体高度
+   * 可设置具体值，如果设置为 100%，则组件会自动计算外层DOM元素offsetHeight，用于计算可渲染行数
+   */
+  height: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.string.def('100%'), shared_namespaceObject.PropTypes.number]).def('100%'),
+  /**
+   * 渲染区域宽度
+   * 如果设置 100% 则自适应外层元素宽度
+   */
+  width: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.string.def('100%'), shared_namespaceObject.PropTypes.number]).def('100%'),
+  /** 最外层元素ClassName */
+  className: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.arrayOf(shared_namespaceObject.PropTypes.string), shared_namespaceObject.PropTypes.object, shared_namespaceObject.PropTypes.arrayOf(shared_namespaceObject.PropTypes.object), shared_namespaceObject.PropTypes.string]).def(''),
+  /** 内层层元素ClassName */
+  contentClassName: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.arrayOf(shared_namespaceObject.PropTypes.string), shared_namespaceObject.PropTypes.object, shared_namespaceObject.PropTypes.arrayOf(shared_namespaceObject.PropTypes.object), shared_namespaceObject.PropTypes.string]).def(''),
+  /** 内层元素样式 */
+  contentStyle: shared_namespaceObject.PropTypes.object.def({}),
+  /** 用于自定义X轴滚动条样式 */
+  scrollXName: shared_namespaceObject.PropTypes.string.def((0,shared_namespaceObject.resolveClassName)('F-scroll-x')),
+  /** 用于自定义Y轴滚动条样式 */
+  scrollYName: shared_namespaceObject.PropTypes.string.def((0,shared_namespaceObject.resolveClassName)('F-scroll-y')),
+  /** 分组展示，一行数据可能有多条数据 */
+  groupItemCount: shared_namespaceObject.PropTypes.number.def(1),
+  /** 预加载行数，避免空白渲染 */
+  preloadItemCount: shared_namespaceObject.PropTypes.number.def(1),
+  /** 外层Dom元素需要渲染成的目标元素 */
+  renderAs: shared_namespaceObject.PropTypes.string.def('div'),
+  /** 内容层渲染成目标元素 */
+  contentAs: shared_namespaceObject.PropTypes.string.def('div'),
+  /** top 滚动填充 */
+  scrollOffsetTop: shared_namespaceObject.PropTypes.number.def(0),
+  /**
+   * 内置滚动位置
+   * 可选：container （最外层容器），content（内容层容器）
+   * Note: container 慎选，需要自己处理样式 & 位置
+   */
+  scrollPosition: shared_namespaceObject.PropTypes.string.def('content'),
+  /**
+   * 绝对高度 | 实际高估
+   * 可选值： auto(根据行高和行数计算, LineHeight * List.length) number(外层给定高度，若为0，则不显示)
+   */
+  abosuteHeight: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.string.def('auto'), shared_namespaceObject.PropTypes.number]).def('auto'),
+  /**
+   * 滚动刷新计算间隔时间
+   * 默认60 ms
+   */
+  throttleDelay: shared_namespaceObject.PropTypes.number.def(60),
+  rowKey: shared_namespaceObject.PropTypes.string.def(undefined),
+  /**
+   * 数据改变时是否保持之前的状态
+   * 保持滚动条位置、当前渲染区间
+   */
+  keepAlive: shared_namespaceObject.PropTypes.bool.def(false),
+  /**
+   * 是否允许滚动条改变原有DOM结构
+   */
+  scrollbar: (0,external_vue_types_namespaceObject.toType)('IScrollbarOption', {
+    "default": {
+      enabled: false
+    }
+  }),
+  /**
+   * 数据监听改变时，是否自动重置位置到[0, 0]
+   */
+  autoReset: shared_namespaceObject.PropTypes.bool.def(true),
+  wrapperStyle: shared_namespaceObject.PropTypes.any.def({})
+}, EventProps);
+;// CONCATENATED MODULE: ../../packages/virtual-render/src/use-fix-top.tsx
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+/* harmony default export */ const use_fix_top = (function (props, scrollTo) {
+  /**
+   * 指定元素滚动到顶部
+   * @param param0
+   */
+  var fixToTop = function fixToTop(params) {
+    var id = params.id,
+      index = params.index,
+      item = params.item;
+    var targetIndex = typeof index === 'number' ? index - 1 : 0;
+    if (id !== undefined) {
+      var _props$list$findIndex;
+      targetIndex = (_props$list$findIndex = props.list.findIndex(function (row) {
+        return row[props.rowKey] === id;
+      })) !== null && _props$list$findIndex !== void 0 ? _props$list$findIndex : targetIndex;
+    }
+    if (item !== undefined) {
+      var _props$list$findIndex2;
+      targetIndex = (_props$list$findIndex2 = props.list.findIndex(function (row) {
+        return item[props.rowKey] === row[props.rowKey];
+      })) !== null && _props$list$findIndex2 !== void 0 ? _props$list$findIndex2 : targetIndex;
+    }
+    if (typeof targetIndex === 'number') {
+      var resolvedIndex = targetIndex >= 0 ? targetIndex : 0;
+      var offsetY = resolvedIndex * props.lineHeight;
+      scrollTo(0, offsetY);
+    }
+    return null;
+  };
+  return {
+    fixToTop: fixToTop
+  };
+});
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/classCallCheck.js
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/createClass.js
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor);
+  }
+}
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
+  return Constructor;
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+  return self;
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn.js
+
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (_typeof(call) === "object" || typeof call === "function")) {
+    return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
+  }
+  return _assertThisInitialized(self);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/inherits.js
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/iterableToArrayLimit.js
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/nonIterableRest.js
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/slicedToArray.js
+
+
+
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+;// CONCATENATED MODULE: ../../node_modules/lodash-es/isObject.js
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
+ */
+function isObject(value) {
+  var type = typeof value;
+  return value != null && (type == 'object' || type == 'function');
+}
+
+/* harmony default export */ const lodash_es_isObject = (isObject);
+
+;// CONCATENATED MODULE: ../../node_modules/lodash-es/_freeGlobal.js
+/** Detect free variable `global` from Node.js. */
+var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
+
+/* harmony default export */ const _freeGlobal = (freeGlobal);
+
+;// CONCATENATED MODULE: ../../node_modules/lodash-es/_root.js
+
+
+/** Detect free variable `self`. */
+var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root = _freeGlobal || freeSelf || Function('return this')();
+
+/* harmony default export */ const _root = (root);
+
+;// CONCATENATED MODULE: ../../node_modules/lodash-es/now.js
+
+
+/**
+ * Gets the timestamp of the number of milliseconds that have elapsed since
+ * the Unix epoch (1 January 1970 00:00:00 UTC).
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Date
+ * @returns {number} Returns the timestamp.
+ * @example
+ *
+ * _.defer(function(stamp) {
+ *   console.log(_.now() - stamp);
+ * }, _.now());
+ * // => Logs the number of milliseconds it took for the deferred invocation.
+ */
+var now = function() {
+  return _root.Date.now();
+};
+
+/* harmony default export */ const lodash_es_now = (now);
+
+;// CONCATENATED MODULE: ../../node_modules/lodash-es/_trimmedEndIndex.js
+/** Used to match a single whitespace character. */
+var reWhitespace = /\s/;
+
+/**
+ * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
+ * character of `string`.
+ *
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {number} Returns the index of the last non-whitespace character.
+ */
+function trimmedEndIndex(string) {
+  var index = string.length;
+
+  while (index-- && reWhitespace.test(string.charAt(index))) {}
+  return index;
+}
+
+/* harmony default export */ const _trimmedEndIndex = (trimmedEndIndex);
+
+;// CONCATENATED MODULE: ../../node_modules/lodash-es/_baseTrim.js
+
+
+/** Used to match leading whitespace. */
+var reTrimStart = /^\s+/;
+
+/**
+ * The base implementation of `_.trim`.
+ *
+ * @private
+ * @param {string} string The string to trim.
+ * @returns {string} Returns the trimmed string.
+ */
+function baseTrim(string) {
+  return string
+    ? string.slice(0, _trimmedEndIndex(string) + 1).replace(reTrimStart, '')
+    : string;
+}
+
+/* harmony default export */ const _baseTrim = (baseTrim);
+
+;// CONCATENATED MODULE: ../../node_modules/lodash-es/_Symbol.js
+
+
+/** Built-in value references. */
+var _Symbol_Symbol = _root.Symbol;
+
+/* harmony default export */ const _Symbol = (_Symbol_Symbol);
+
+;// CONCATENATED MODULE: ../../node_modules/lodash-es/_getRawTag.js
+
+
+/** Used for built-in method references. */
+var objectProto = Object.prototype;
+
+/** Used to check objects for own properties. */
+var _getRawTag_hasOwnProperty = objectProto.hasOwnProperty;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString = objectProto.toString;
+
+/** Built-in value references. */
+var symToStringTag = _Symbol ? _Symbol.toStringTag : undefined;
+
+/**
+ * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the raw `toStringTag`.
+ */
+function getRawTag(value) {
+  var isOwn = _getRawTag_hasOwnProperty.call(value, symToStringTag),
+      tag = value[symToStringTag];
+
+  try {
+    value[symToStringTag] = undefined;
+    var unmasked = true;
+  } catch (e) {}
+
+  var result = nativeObjectToString.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag] = tag;
+    } else {
+      delete value[symToStringTag];
+    }
+  }
+  return result;
+}
+
+/* harmony default export */ const _getRawTag = (getRawTag);
+
+;// CONCATENATED MODULE: ../../node_modules/lodash-es/_objectToString.js
+/** Used for built-in method references. */
+var _objectToString_objectProto = Object.prototype;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var _objectToString_nativeObjectToString = _objectToString_objectProto.toString;
+
+/**
+ * Converts `value` to a string using `Object.prototype.toString`.
+ *
+ * @private
+ * @param {*} value The value to convert.
+ * @returns {string} Returns the converted string.
+ */
+function objectToString(value) {
+  return _objectToString_nativeObjectToString.call(value);
+}
+
+/* harmony default export */ const _objectToString = (objectToString);
+
+;// CONCATENATED MODULE: ../../node_modules/lodash-es/_baseGetTag.js
+
+
+
+
+/** `Object#toString` result references. */
+var nullTag = '[object Null]',
+    undefinedTag = '[object Undefined]';
+
+/** Built-in value references. */
+var _baseGetTag_symToStringTag = _Symbol ? _Symbol.toStringTag : undefined;
+
+/**
+ * The base implementation of `getTag` without fallbacks for buggy environments.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the `toStringTag`.
+ */
+function baseGetTag(value) {
+  if (value == null) {
+    return value === undefined ? undefinedTag : nullTag;
+  }
+  return (_baseGetTag_symToStringTag && _baseGetTag_symToStringTag in Object(value))
+    ? _getRawTag(value)
+    : _objectToString(value);
+}
+
+/* harmony default export */ const _baseGetTag = (baseGetTag);
+
+;// CONCATENATED MODULE: ../../node_modules/lodash-es/isObjectLike.js
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+function isObjectLike(value) {
+  return value != null && typeof value == 'object';
+}
+
+/* harmony default export */ const lodash_es_isObjectLike = (isObjectLike);
+
+;// CONCATENATED MODULE: ../../node_modules/lodash-es/isSymbol.js
+
+
+
+/** `Object#toString` result references. */
+var symbolTag = '[object Symbol]';
+
+/**
+ * Checks if `value` is classified as a `Symbol` primitive or object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+ * @example
+ *
+ * _.isSymbol(Symbol.iterator);
+ * // => true
+ *
+ * _.isSymbol('abc');
+ * // => false
+ */
+function isSymbol(value) {
+  return typeof value == 'symbol' ||
+    (lodash_es_isObjectLike(value) && _baseGetTag(value) == symbolTag);
+}
+
+/* harmony default export */ const lodash_es_isSymbol = (isSymbol);
+
+;// CONCATENATED MODULE: ../../node_modules/lodash-es/toNumber.js
+
+
+
+
+/** Used as references for various `Number` constants. */
+var NAN = 0 / 0;
+
+/** Used to detect bad signed hexadecimal string values. */
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+
+/** Used to detect binary string values. */
+var reIsBinary = /^0b[01]+$/i;
+
+/** Used to detect octal string values. */
+var reIsOctal = /^0o[0-7]+$/i;
+
+/** Built-in method references without a dependency on `root`. */
+var freeParseInt = parseInt;
+
+/**
+ * Converts `value` to a number.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to process.
+ * @returns {number} Returns the number.
+ * @example
+ *
+ * _.toNumber(3.2);
+ * // => 3.2
+ *
+ * _.toNumber(Number.MIN_VALUE);
+ * // => 5e-324
+ *
+ * _.toNumber(Infinity);
+ * // => Infinity
+ *
+ * _.toNumber('3.2');
+ * // => 3.2
+ */
+function toNumber(value) {
+  if (typeof value == 'number') {
+    return value;
+  }
+  if (lodash_es_isSymbol(value)) {
+    return NAN;
+  }
+  if (lodash_es_isObject(value)) {
+    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+    value = lodash_es_isObject(other) ? (other + '') : other;
+  }
+  if (typeof value != 'string') {
+    return value === 0 ? value : +value;
+  }
+  value = _baseTrim(value);
+  var isBinary = reIsBinary.test(value);
+  return (isBinary || reIsOctal.test(value))
+    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
+    : (reIsBadHex.test(value) ? NAN : +value);
+}
+
+/* harmony default export */ const lodash_es_toNumber = (toNumber);
+
+;// CONCATENATED MODULE: ../../node_modules/lodash-es/debounce.js
+
+
+
+
+/** Error message constants. */
+var FUNC_ERROR_TEXT = 'Expected a function';
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeMax = Math.max,
+    nativeMin = Math.min;
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked. The debounced function comes with a `cancel` method to cancel
+ * delayed `func` invocations and a `flush` method to immediately invoke them.
+ * Provide `options` to indicate whether `func` should be invoked on the
+ * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+ * with the last arguments provided to the debounced function. Subsequent
+ * calls to the debounced function return the result of the last `func`
+ * invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.debounce` and `_.throttle`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to debounce.
+ * @param {number} [wait=0] The number of milliseconds to delay.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=false]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {number} [options.maxWait]
+ *  The maximum time `func` is allowed to be delayed before it's invoked.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new debounced function.
+ * @example
+ *
+ * // Avoid costly calculations while the window size is in flux.
+ * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+ *
+ * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+ * jQuery(element).on('click', _.debounce(sendMail, 300, {
+ *   'leading': true,
+ *   'trailing': false
+ * }));
+ *
+ * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+ * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+ * var source = new EventSource('/stream');
+ * jQuery(source).on('message', debounced);
+ *
+ * // Cancel the trailing debounced invocation.
+ * jQuery(window).on('popstate', debounced.cancel);
+ */
+function debounce(func, wait, options) {
+  var lastArgs,
+      lastThis,
+      maxWait,
+      result,
+      timerId,
+      lastCallTime,
+      lastInvokeTime = 0,
+      leading = false,
+      maxing = false,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  wait = lodash_es_toNumber(wait) || 0;
+  if (lodash_es_isObject(options)) {
+    leading = !!options.leading;
+    maxing = 'maxWait' in options;
+    maxWait = maxing ? nativeMax(lodash_es_toNumber(options.maxWait) || 0, wait) : maxWait;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+
+  function invokeFunc(time) {
+    var args = lastArgs,
+        thisArg = lastThis;
+
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time;
+    // Start the timer for the trailing edge.
+    timerId = setTimeout(timerExpired, wait);
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result;
+  }
+
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime,
+        timeWaiting = wait - timeSinceLastCall;
+
+    return maxing
+      ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
+      : timeWaiting;
+  }
+
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime;
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
+      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+  }
+
+  function timerExpired() {
+    var time = lodash_es_now();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    // Restart the timer.
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined;
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = undefined;
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(lodash_es_now());
+  }
+
+  function debounced() {
+    var time = lodash_es_now(),
+        isInvoking = shouldInvoke(time);
+
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+
+/* harmony default export */ const lodash_es_debounce = (debounce);
+
+;// CONCATENATED MODULE: ../../node_modules/lodash-es/throttle.js
+
+
+
+/** Error message constants. */
+var throttle_FUNC_ERROR_TEXT = 'Expected a function';
+
+/**
+ * Creates a throttled function that only invokes `func` at most once per
+ * every `wait` milliseconds. The throttled function comes with a `cancel`
+ * method to cancel delayed `func` invocations and a `flush` method to
+ * immediately invoke them. Provide `options` to indicate whether `func`
+ * should be invoked on the leading and/or trailing edge of the `wait`
+ * timeout. The `func` is invoked with the last arguments provided to the
+ * throttled function. Subsequent calls to the throttled function return the
+ * result of the last `func` invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the throttled function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.throttle` and `_.debounce`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to throttle.
+ * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=true]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new throttled function.
+ * @example
+ *
+ * // Avoid excessively updating the position while scrolling.
+ * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
+ *
+ * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
+ * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
+ * jQuery(element).on('click', throttled);
+ *
+ * // Cancel the trailing throttled invocation.
+ * jQuery(window).on('popstate', throttled.cancel);
+ */
+function throttle(func, wait, options) {
+  var leading = true,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(throttle_FUNC_ERROR_TEXT);
+  }
+  if (lodash_es_isObject(options)) {
+    leading = 'leading' in options ? !!options.leading : leading;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+  return lodash_es_debounce(func, wait, {
+    'leading': leading,
+    'maxWait': wait,
+    'trailing': trailing
+  });
+}
+
+/* harmony default export */ const lodash_es_throttle = (throttle);
+
+;// CONCATENATED MODULE: ../../packages/virtual-render/src/scrollbar-core/can-use-dom.ts
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+/* harmony default export */ const can_use_dom = (function () {
+  return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+});
+;// CONCATENATED MODULE: ../../packages/virtual-render/src/scrollbar-core/helpers.ts
+
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+function getElementWindow(element) {
+  var _element$ownerDocumen, _element$ownerDocumen2;
+  return (_element$ownerDocumen = element === null || element === void 0 || (_element$ownerDocumen2 = element.ownerDocument) === null || _element$ownerDocumen2 === void 0 ? void 0 : _element$ownerDocumen2.defaultView) !== null && _element$ownerDocumen !== void 0 ? _element$ownerDocumen : window;
+}
+function getElementDocument(element) {
+  var _element$ownerDocumen3;
+  return (_element$ownerDocumen3 = element === null || element === void 0 ? void 0 : element.ownerDocument) !== null && _element$ownerDocumen3 !== void 0 ? _element$ownerDocumen3 : document;
+}
+function addClasses(el, classes) {
+  var _el$classList;
+  if (!el) return;
+  (_el$classList = el.classList).add.apply(_el$classList, _toConsumableArray(classes.split(' ')));
+}
+function removeClasses(el, classes) {
+  if (!el) return;
+  classes.split(' ').forEach(function (className) {
+    el.classList.remove(className);
+  });
+}
+function classNamesToQuery(classNames) {
+  return ".".concat(classNames.split(' ').join('.'));
+}
+;// CONCATENATED MODULE: ../../packages/virtual-render/src/scrollbar-core/mouse-wheel.ts
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+/* harmony default export */ const mouse_wheel = (function (fn) {
+  var DELTA_SCALE = {
+    STANDARD: 1,
+    OTHERS: -3
+  };
+  var DELTA_MODE = [1.0, 28.0, 500.0];
+  var getDeltaMode = function getDeltaMode(mode) {
+    return DELTA_MODE[mode] || DELTA_MODE[0];
+  };
+  var normalizeDelta = function normalizeDelta(evt) {
+    if ('deltaX' in evt) {
+      var mode = getDeltaMode(evt.deltaMode);
+      return {
+        x: evt.deltaX / DELTA_SCALE.STANDARD * mode,
+        y: evt.deltaY / DELTA_SCALE.STANDARD * mode,
+        evt: evt
+      };
+    }
+    if ('wheelDeltaX' in evt) {
+      return {
+        x: evt.wheelDeltaX / DELTA_SCALE.OTHERS,
+        y: evt.wheelDeltaY / DELTA_SCALE.OTHERS,
+        evt: evt
+      };
+    }
+    // ie with touchpad
+    return {
+      x: 0,
+      y: evt.wheelDelta / DELTA_SCALE.OTHERS,
+      evt: evt
+    };
+  };
+  var eventName = 'onwheel' in window || document.implementation.hasFeature('Events.wheel', '3.0') ? 'wheel' : 'mousewheel';
+  var resolveEventResponse = function resolveEventResponse(e) {
+    fn(normalizeDelta(e));
+  };
+  var addWheelEvent = function addWheelEvent(target) {
+    target.addEventListener(eventName, resolveEventResponse);
+  };
+  var removeWheelEvent = function removeWheelEvent(target) {
+    target.removeEventListener(eventName, resolveEventResponse);
+  };
+  return {
+    addWheelEvent: addWheelEvent,
+    removeWheelEvent: removeWheelEvent
+  };
+});
+;// CONCATENATED MODULE: ../../packages/virtual-render/src/scrollbar-core/scrollbar-width.ts
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+var cachedScrollbarWidth = null;
+var cachedDevicePixelRatio = null;
+if (can_use_dom()) {
+  window.addEventListener('resize', function () {
+    if (cachedDevicePixelRatio !== window.devicePixelRatio) {
+      cachedDevicePixelRatio = window.devicePixelRatio;
+      cachedScrollbarWidth = null;
+    }
+  });
+}
+function scrollbarWidth() {
+  if (cachedScrollbarWidth === null) {
+    if (typeof document === 'undefined') {
+      cachedScrollbarWidth = 0;
+      return cachedScrollbarWidth;
+    }
+    var _document = document,
+      body = _document.body;
+    var box = document.createElement('div');
+    box.classList.add('simplebar-hide-scrollbar');
+    body.appendChild(box);
+    var width = box.getBoundingClientRect().right;
+    body.removeChild(box);
+    cachedScrollbarWidth = width;
+  }
+  return cachedScrollbarWidth;
+}
+;// CONCATENATED MODULE: ../../packages/virtual-render/src/scrollbar-core/index.ts
+
+
+
+
+
+function scrollbar_core_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function scrollbar_core_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? scrollbar_core_ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : scrollbar_core_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+
+
+
+
+
+var scrollbar_core_getElementWindow = getElementWindow,
+  scrollbar_core_getElementDocument = getElementDocument,
+  scrollbar_core_addClasses = addClasses,
+  scrollbar_core_removeClasses = removeClasses,
+  scrollbar_core_classNamesToQuery = classNamesToQuery;
+var SimpleBarCore = /*#__PURE__*/function () {
+  // eslint-disable-next-line @typescript-eslint/member-ordering
+  function SimpleBarCore(element) {
+    var _this = this;
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    _classCallCheck(this, SimpleBarCore);
+    _defineProperty(this, "removePreventClickId", null);
+    _defineProperty(this, "minScrollbarWidth", 20);
+    _defineProperty(this, "stopScrollDelay", 175);
+    _defineProperty(this, "isScrolling", false);
+    _defineProperty(this, "isMouseEntering", false);
+    _defineProperty(this, "isDragging", false);
+    _defineProperty(this, "scrollXTicking", false);
+    _defineProperty(this, "scrollYTicking", false);
+    _defineProperty(this, "wrapperEl", null);
+    _defineProperty(this, "contentEl", null);
+    _defineProperty(this, "delegateXContent", null);
+    _defineProperty(this, "delegateYContent", null);
+    _defineProperty(this, "rtlHelpers", null);
+    _defineProperty(this, "scrollbarWidth", 0);
+    _defineProperty(this, "resizeObserver", null);
+    _defineProperty(this, "mutationObserver", null);
+    _defineProperty(this, "elStyles", null);
+    _defineProperty(this, "isRtl", null);
+    _defineProperty(this, "mouseX", 0);
+    _defineProperty(this, "mouseY", 0);
+    _defineProperty(this, "mouseWheelInstance", null);
+    _defineProperty(this, "wheelOffset", 0);
+    /**
+     * 最外层滚动容器滚动实际位置缓存器
+     */
+    _defineProperty(this, "wrapperScrollValue", {
+      scrollTop: 0,
+      scrollLeft: 0
+    });
+    /**
+     * 模拟滚动条内部缩略滚动器滚动位置缓存器
+     */
+    _defineProperty(this, "wrapperScrollMap", {});
+    _defineProperty(this, "onMouseMove", function () {});
+    _defineProperty(this, "onWindowResize", function () {});
+    _defineProperty(this, "onStopScrolling", function () {});
+    _defineProperty(this, "onMouseEntered", function () {});
+    _defineProperty(this, "onMouseWheel", function () {});
+    /**
+     * On scroll event handling
+     */
+    _defineProperty(this, "onScroll", function () {
+      var elWindow = scrollbar_core_getElementWindow(_this.el);
+      if (!_this.scrollXTicking) {
+        elWindow.requestAnimationFrame(_this.scrollX);
+        _this.scrollXTicking = true;
+      }
+      if (!_this.scrollYTicking) {
+        elWindow.requestAnimationFrame(_this.scrollY);
+        _this.scrollYTicking = true;
+      }
+      if (!_this.isScrolling) {
+        _this.isScrolling = true;
+        scrollbar_core_addClasses(_this.el, _this.classNames.scrolling);
+      }
+      _this.showScrollbar('x');
+      _this.showScrollbar('y');
+      _this.onStopScrolling();
+    });
+    _defineProperty(this, "scrollX", function () {
+      if (_this.axis.x.isOverflowing) {
+        _this.positionScrollbar('x');
+      }
+      _this.scrollXTicking = false;
+    });
+    _defineProperty(this, "scrollY", function () {
+      if (_this.axis.y.isOverflowing) {
+        _this.positionScrollbar('y');
+      }
+      _this.scrollYTicking = false;
+    });
+    _defineProperty(this, "_onMouseWheel", function (args) {
+      var nextPostiion = _this.wheelOffset + args.y;
+      if (_this.scrollToAxisPosition(nextPostiion, 'y')) {
+        args.evt.stopPropagation();
+        args.evt.preventDefault();
+        args.evt.stopImmediatePropagation();
+        _this.showScrollbar('y');
+        if (_this.mouseWeelTimer) {
+          clearTimeout(_this.mouseWeelTimer);
+          _this.mouseWeelTimer = null;
+        }
+        _this.mouseWeelTimer = setTimeout(function () {
+          _this.hideScrollbar('y');
+        }, 200);
+      }
+    });
+    _defineProperty(this, "_onStopScrolling", function () {
+      scrollbar_core_removeClasses(_this.el, _this.classNames.scrolling);
+      if (_this.options.autoHide) {
+        _this.hideScrollbar('x');
+        _this.hideScrollbar('y');
+      }
+      _this.isScrolling = false;
+    });
+    _defineProperty(this, "onMouseEnter", function () {
+      _this.mouseWeelTimer && clearTimeout(_this.mouseWeelTimer);
+      if (!_this.isMouseEntering) {
+        scrollbar_core_addClasses(_this.el, _this.classNames.mouseEntered);
+        _this.showScrollbar('x');
+        _this.showScrollbar('y');
+        _this.isMouseEntering = true;
+      }
+      _this.onMouseEntered();
+    });
+    _defineProperty(this, "_onMouseEntered", function () {
+      scrollbar_core_removeClasses(_this.el, _this.classNames.mouseEntered);
+      if (_this.options.autoHide) {
+        _this.hideScrollbar('x');
+        _this.hideScrollbar('y');
+      }
+      _this.isMouseEntering = false;
+    });
+    _defineProperty(this, "_onMouseMove", function (e) {
+      _this.mouseX = e.clientX;
+      _this.mouseY = e.clientY;
+      if (_this.axis.x.isOverflowing || _this.axis.x.forceVisible) {
+        _this.onMouseMoveForAxis('x');
+      }
+      if (_this.axis.y.isOverflowing || _this.axis.y.forceVisible) {
+        _this.onMouseMoveForAxis('y');
+      }
+    });
+    _defineProperty(this, "onMouseLeave", function () {
+      _this.onMouseMove.cancel();
+      if (_this.axis.x.isOverflowing || _this.axis.x.forceVisible) {
+        _this.onMouseLeaveForAxis('x');
+      }
+      if (_this.axis.y.isOverflowing || _this.axis.y.forceVisible) {
+        _this.onMouseLeaveForAxis('y');
+      }
+      _this.mouseX = -1;
+      _this.mouseY = -1;
+    });
+    _defineProperty(this, "_onWindowResize", function () {
+      // Recalculate scrollbarWidth in case it's a zoom
+      _this.scrollbarWidth = _this.getScrollbarWidth();
+    });
+    _defineProperty(this, "onPointerEvent", function (e) {
+      if (!_this.axis.x.track.el || !_this.axis.y.track.el || !_this.axis.x.scrollbar.el || !_this.axis.y.scrollbar.el) return;
+      var isWithinTrackXBounds;
+      var isWithinTrackYBounds;
+      _this.axis.x.track.rect = _this.axis.x.track.el.getBoundingClientRect();
+      _this.axis.y.track.rect = _this.axis.y.track.el.getBoundingClientRect();
+      if (_this.axis.x.isOverflowing || _this.axis.x.forceVisible) {
+        isWithinTrackXBounds = _this.isWithinBounds(_this.axis.x.track.rect);
+      }
+      if (_this.axis.y.isOverflowing || _this.axis.y.forceVisible) {
+        isWithinTrackYBounds = _this.isWithinBounds(_this.axis.y.track.rect);
+      }
+      // If any pointer event is called on the scrollbar
+      if (isWithinTrackXBounds || isWithinTrackYBounds) {
+        // Prevent event leaking
+        e.stopPropagation();
+        if (e.type === 'pointerdown' && e.pointerType !== 'touch') {
+          if (isWithinTrackXBounds) {
+            _this.axis.x.scrollbar.rect = _this.axis.x.scrollbar.el.getBoundingClientRect();
+            if (_this.isWithinBounds(_this.axis.x.scrollbar.rect)) {
+              _this.onDragStart(e, 'x');
+            } else {
+              _this.onTrackClick(e, 'x');
+            }
+          }
+          if (isWithinTrackYBounds) {
+            _this.axis.y.scrollbar.rect = _this.axis.y.scrollbar.el.getBoundingClientRect();
+            if (_this.isWithinBounds(_this.axis.y.scrollbar.rect)) {
+              _this.onDragStart(e, 'y');
+            } else {
+              _this.onTrackClick(e, 'y');
+            }
+          }
+        }
+      }
+    });
+    /**
+     * Drag scrollbar handle
+     */
+    _defineProperty(this, "drag", function (e) {
+      var _track$rect$_this$axi, _track$rect, _track$rect$_this$axi2, _track$rect2;
+      if (!_this.draggedAxis || !_this.wrapperEl) return;
+      var eventOffset;
+      var track = _this.axis[_this.draggedAxis].track;
+      var scrollbar = _this.axis[_this.draggedAxis].scrollbar;
+      e.preventDefault();
+      e.stopPropagation();
+      if (_this.draggedAxis === 'y') {
+        eventOffset = e.pageY;
+      } else {
+        eventOffset = e.pageX;
+      }
+      // Calculate how far the user's mouse is from the top/left of the scrollbar (minus the dragOffset).
+      var dragPos = eventOffset - ((_track$rect$_this$axi = (_track$rect = track.rect) === null || _track$rect === void 0 ? void 0 : _track$rect[_this.axis[_this.draggedAxis].offsetAttr]) !== null && _track$rect$_this$axi !== void 0 ? _track$rect$_this$axi : 0) - _this.axis[_this.draggedAxis].dragOffset;
+      dragPos = _this.draggedAxis === 'x' && _this.isRtl ? ((_track$rect$_this$axi2 = (_track$rect2 = track.rect) === null || _track$rect2 === void 0 ? void 0 : _track$rect2[_this.axis[_this.draggedAxis].sizeAttr]) !== null && _track$rect$_this$axi2 !== void 0 ? _track$rect$_this$axi2 : 0) - scrollbar.size - dragPos : dragPos;
+      var scrollPos = _this.getPointerPosition(dragPos, _this.draggedAxis);
+      _this.scrollToAxisPosition(scrollPos, _this.draggedAxis);
+    });
+    _defineProperty(this, "getPointerPosition", function (dragPos, axis) {
+      var _track$rect$_this$axi3, _track$rect3, _this$wrapperEl$_this, _this$wrapperEl, _this$elStyles$_this$, _this$elStyles;
+      var track = _this.axis[axis].track;
+      var trackSize = (_track$rect$_this$axi3 = (_track$rect3 = track.rect) === null || _track$rect3 === void 0 ? void 0 : _track$rect3[_this.axis[axis].sizeAttr]) !== null && _track$rect$_this$axi3 !== void 0 ? _track$rect$_this$axi3 : 0;
+      var scrollbar = _this.axis[axis].scrollbar;
+      var contentSize = (_this$wrapperEl$_this = (_this$wrapperEl = _this.wrapperEl) === null || _this$wrapperEl === void 0 ? void 0 : _this$wrapperEl[_this.axis[axis].scrollSizeAttr]) !== null && _this$wrapperEl$_this !== void 0 ? _this$wrapperEl$_this : 0;
+      var hostSize = parseInt((_this$elStyles$_this$ = (_this$elStyles = _this.elStyles) === null || _this$elStyles === void 0 ? void 0 : _this$elStyles[_this.axis[axis].sizeAttr]) !== null && _this$elStyles$_this$ !== void 0 ? _this$elStyles$_this$ : '0px', 10);
+      // Convert the mouse position into a percentage of the scrollbar height/width.
+      var dragPerc = dragPos / (trackSize - scrollbar.size);
+      // Scroll the content by the same percentage.
+      var scrollPos = dragPerc * (contentSize - hostSize);
+      // Fix browsers inconsistency on RTL
+      if (axis === 'x' && _this.isRtl) {
+        var _SimpleBarCore$getRtl;
+        scrollPos = (_SimpleBarCore$getRtl = SimpleBarCore.getRtlHelpers()) !== null && _SimpleBarCore$getRtl !== void 0 && _SimpleBarCore$getRtl.isScrollingToNegative ? -scrollPos : scrollPos;
+      }
+      return scrollPos;
+    });
+    _defineProperty(this, "scrollToAxisPosition", function (scrollPos, axisValue) {
+      var _this$wrapperScrollVa;
+      var getFormatPosition = function getFormatPosition() {
+        if (scrollPos < 0) {
+          return 0;
+        }
+        if (axisValue === 'y') {
+          var diffHeight = _this.wrapperEl.scrollHeight - _this.wrapperEl.offsetHeight;
+          return scrollPos >= diffHeight ? diffHeight : scrollPos;
+        }
+        var diffWidth = _this.wrapperEl.scrollWidth - _this.wrapperEl.offsetWidth;
+        return scrollPos >= diffWidth ? diffWidth : scrollPos;
+      };
+      var scrollAttr = _this.axis[axisValue].scrollOffsetAttr;
+      var resolvedValue = getFormatPosition();
+      var scrollValue = (_this$wrapperScrollVa = _this.wrapperScrollValue[scrollAttr]) !== null && _this$wrapperScrollVa !== void 0 ? _this$wrapperScrollVa : 0;
+      if (scrollValue !== resolvedValue) {
+        _this.fixedScrollTo(axisValue, resolvedValue);
+        return true;
+      }
+      return false;
+    });
+    _defineProperty(this, "fixedScrollTo", function (axisValue, resolvedValue) {
+      var _this$options, _this$options$onScrol;
+      var getStyleValue = function getStyleValue(key) {
+        var xValue = _this.axis[key].track.el.style.getPropertyValue('--scroll-offset-x');
+        var yValye = _this.axis[key].track.el.style.getPropertyValue('--scroll-offset-y');
+        return [xValue ? xValue : '0px', yValye ? yValye : '0px'];
+      };
+      var scrollAttr = _this.axis[axisValue].scrollOffsetAttr;
+      Object.assign(_this.wrapperScrollValue, _defineProperty({}, scrollAttr, resolvedValue));
+      if (_this.options.useSystemScrollXBehavior && axisValue === 'x' || _this.options.useSystemScrollYBehavior && axisValue === 'y') {
+        _this.wrapperEl[scrollAttr] = resolvedValue;
+        var _getStyleValue = getStyleValue('y'),
+          _getStyleValue2 = _slicedToArray(_getStyleValue, 2),
+          verticalX = _getStyleValue2[0],
+          verticalY = _getStyleValue2[1];
+        var _getStyleValue3 = getStyleValue('x'),
+          _getStyleValue4 = _slicedToArray(_getStyleValue3, 2),
+          horiX = _getStyleValue4[0],
+          horiY = _getStyleValue4[1];
+        var old = {
+          x: {
+            x: horiX,
+            y: horiY
+          },
+          y: {
+            x: verticalX,
+            y: verticalY
+          }
+        };
+        ['x', 'y'].forEach(function (key) {
+          old[key][axisValue] = "".concat(resolvedValue, "px");
+          _this.axis[key].track.el.style.setProperty('--scroll-offset-x', old[key].x);
+          _this.axis[key].track.el.style.setProperty('--scroll-offset-y', old[key].y);
+        });
+      }
+      if (axisValue === 'y') {
+        _this.wheelOffset = resolvedValue;
+      }
+      (_this$options = _this.options) === null || _this$options === void 0 || (_this$options$onScrol = _this$options.onScrollCallback) === null || _this$options$onScrol === void 0 || _this$options$onScrol.call(_this$options, {
+        x: _this.wrapperScrollValue.scrollLeft,
+        y: _this.wrapperScrollValue.scrollTop
+      });
+      _this.positionScrollbar(axisValue);
+    });
+    /**
+     * End scroll handle drag
+     */
+    _defineProperty(this, "onEndDrag", function (e) {
+      _this.isDragging = false;
+      var elDocument = scrollbar_core_getElementDocument(_this.el);
+      var elWindow = scrollbar_core_getElementWindow(_this.el);
+      e.preventDefault();
+      e.stopPropagation();
+      scrollbar_core_removeClasses(_this.el, _this.classNames.dragging);
+      _this.onStopScrolling();
+      elDocument.removeEventListener('mousemove', _this.drag, true);
+      elDocument.removeEventListener('mouseup', _this.onEndDrag, true);
+      _this.removePreventClickId = elWindow.setTimeout(function () {
+        // Remove these asynchronously so we still suppress click events
+        // generated simultaneously with mouseup.
+        elDocument.removeEventListener('click', _this.preventClick, true);
+        elDocument.removeEventListener('dblclick', _this.preventClick, true);
+        _this.removePreventClickId = null;
+        scrollbar_core_removeClasses(_this.axis[_this.draggedAxis].track.el, _this.classNames.hover);
+      });
+    });
+    /**
+     * Handler to ignore click events during drag
+     */
+    _defineProperty(this, "preventClick", function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+    });
+    this.el = element;
+    this.options = scrollbar_core_objectSpread(scrollbar_core_objectSpread({}, SimpleBarCore.defaultOptions), options);
+    this.classNames = scrollbar_core_objectSpread(scrollbar_core_objectSpread({}, SimpleBarCore.defaultOptions.classNames), options.classNames);
+    this.axis = {
+      x: {
+        scrollOffsetAttr: 'scrollLeft',
+        sizeAttr: 'width',
+        scrollSizeAttr: 'scrollWidth',
+        offsetSizeAttr: 'offsetWidth',
+        offsetAttr: 'left',
+        overflowAttr: 'overflowX',
+        dragOffset: 0,
+        isOverflowing: true,
+        forceVisible: false,
+        track: {
+          size: null,
+          el: null,
+          rect: null,
+          isVisible: false
+        },
+        scrollbar: {
+          size: null,
+          el: null,
+          rect: null,
+          isVisible: false
+        }
+      },
+      y: {
+        scrollOffsetAttr: 'scrollTop',
+        sizeAttr: 'height',
+        scrollSizeAttr: 'scrollHeight',
+        offsetSizeAttr: 'offsetHeight',
+        offsetAttr: 'top',
+        overflowAttr: 'overflowY',
+        dragOffset: 0,
+        isOverflowing: true,
+        forceVisible: false,
+        track: {
+          size: null,
+          el: null,
+          rect: null,
+          isVisible: false
+        },
+        scrollbar: {
+          size: null,
+          el: null,
+          rect: null,
+          isVisible: false
+        }
+      }
+    };
+    if (_typeof(this.el) !== 'object' || !this.el.nodeName) {
+      throw new Error("Argument passed to SimpleBar must be an HTML element instead of ".concat(this.el));
+    }
+    this.onMouseMove = lodash_es_throttle(this._onMouseMove, 64);
+    this.onWindowResize = lodash_es_debounce(this._onWindowResize, 64, {
+      leading: true
+    });
+    this.onStopScrolling = lodash_es_debounce(this._onStopScrolling, this.stopScrollDelay);
+    this.onMouseEntered = lodash_es_debounce(this._onMouseEntered, this.stopScrollDelay);
+    this.mouseWheelInstance = mouse_wheel(this._onMouseWheel);
+    this.init();
+  }
+  return _createClass(SimpleBarCore, [{
+    key: "getScrollbarWidth",
+    value: function getScrollbarWidth() {
+      // Try/catch for FF 56 throwing on undefined computedStyles
+      try {
+        // Detect browsers supporting CSS scrollbar styling and do not calculate
+        if (this.wrapperEl && getComputedStyle(this.wrapperEl, '::-webkit-scrollbar').display === 'none' || 'scrollbarWidth' in document.documentElement.style || '-ms-overflow-style' in document.documentElement.style) {
+          return 0;
+        }
+        return scrollbarWidth();
+      } catch (e) {
+        return scrollbarWidth();
+      }
+    }
+  }, {
+    key: "init",
+    value: function init() {
+      // We stop here on server-side
+      if (can_use_dom) {
+        this.initDOM();
+        this.rtlHelpers = SimpleBarCore.getRtlHelpers();
+        this.scrollbarWidth = this.getScrollbarWidth();
+        this.recalculate();
+        this.initListeners();
+      }
+    }
+  }, {
+    key: "initDOM",
+    value: function initDOM() {
+      var _this$options$wrapper, _this$options$content, _this$axis$x$track$el, _this$axis$y$track$el;
+      // assume that element has his DOM already initiated
+      this.wrapperEl = (_this$options$wrapper = this.options.wrapperNode) !== null && _this$options$wrapper !== void 0 ? _this$options$wrapper : this.el.querySelector(scrollbar_core_classNamesToQuery(this.classNames.wrapper));
+      this.contentEl = (_this$options$content = this.options.contentNode) !== null && _this$options$content !== void 0 ? _this$options$content : this.el.querySelector(scrollbar_core_classNamesToQuery(this.classNames.contentEl));
+      this.axis.x.track.el = this.findChild(this.el, "".concat(scrollbar_core_classNamesToQuery(this.classNames.track)).concat(scrollbar_core_classNamesToQuery(this.classNames.horizontal)));
+      this.axis.y.track.el = this.findChild(this.el, "".concat(scrollbar_core_classNamesToQuery(this.classNames.track)).concat(scrollbar_core_classNamesToQuery(this.classNames.vertical)));
+      this.axis.x.scrollbar.el = ((_this$axis$x$track$el = this.axis.x.track.el) === null || _this$axis$x$track$el === void 0 ? void 0 : _this$axis$x$track$el.querySelector(scrollbar_core_classNamesToQuery(this.classNames.scrollbar))) || null;
+      this.axis.y.scrollbar.el = ((_this$axis$y$track$el = this.axis.y.track.el) === null || _this$axis$y$track$el === void 0 ? void 0 : _this$axis$y$track$el.querySelector(scrollbar_core_classNamesToQuery(this.classNames.scrollbar))) || null;
+      if (!this.options.autoHide) {
+        scrollbar_core_addClasses(this.axis.x.scrollbar.el, this.classNames.visible);
+        scrollbar_core_addClasses(this.axis.y.scrollbar.el, this.classNames.visible);
+      }
+    }
+  }, {
+    key: "initListeners",
+    value: function initListeners() {
+      var _this$mouseWheelInsta,
+        _this2 = this;
+      var elWindow = scrollbar_core_getElementWindow(this.el);
+      // Event listeners
+      (_this$mouseWheelInsta = this.mouseWheelInstance) === null || _this$mouseWheelInsta === void 0 || _this$mouseWheelInsta.addWheelEvent(this.el);
+      this.el.addEventListener('mouseenter', this.onMouseEnter);
+      this.el.addEventListener('pointerdown', this.onPointerEvent, true);
+      this.el.addEventListener('mousemove', this.onMouseMove);
+      this.el.addEventListener('mouseleave', this.onMouseLeave);
+      // Browser zoom triggers a window resize
+      elWindow.addEventListener('resize', this.onWindowResize);
+      if (!this.contentEl) return;
+      if (window.ResizeObserver) {
+        // Hack for https://github.com/WICG/ResizeObserver/issues/38
+        var resizeObserverStarted = false;
+        var resizeObserver = elWindow.ResizeObserver || ResizeObserver;
+        // eslint-disable-next-line new-cap
+        this.resizeObserver = new resizeObserver(function () {
+          if (!resizeObserverStarted) return;
+          elWindow.requestAnimationFrame(function () {
+            _this2.recalculate();
+          });
+        });
+        this.resizeObserver.observe(this.el);
+        this.resizeObserver.observe(this.contentEl);
+        if (this.delegateXContent) {
+          this.resizeObserver.observe(this.delegateXContent);
+        }
+        if (this.delegateYContent) {
+          this.resizeObserver.observe(this.delegateYContent);
+        }
+        elWindow.requestAnimationFrame(function () {
+          resizeObserverStarted = true;
+        });
+      }
+      // This is required to detect horizontal scroll. Vertical scroll only needs the resizeObserver.
+      this.mutationObserver = new elWindow.MutationObserver(function () {
+        elWindow.requestAnimationFrame(function () {
+          _this2.recalculate();
+        });
+      });
+      this.mutationObserver.observe(this.contentEl, {
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+    }
+  }, {
+    key: "recalculate",
+    value: function recalculate() {
+      if (!this.contentEl || !this.wrapperEl) return;
+      var elWindow = scrollbar_core_getElementWindow(this.el);
+      this.elStyles = elWindow.getComputedStyle(this.el);
+      this.isRtl = this.elStyles.direction === 'rtl';
+      var wrapperOffsetWidth = this.wrapperEl.offsetWidth;
+      var wrapperOffsetHeight = this.wrapperEl.offsetHeight;
+      var wrapperScrollHeight = this.wrapperEl.scrollHeight;
+      var wrapperScrollWidth = this.wrapperEl.scrollWidth;
+      this.axis.x.isOverflowing = wrapperOffsetWidth !== 0 && wrapperScrollWidth > wrapperOffsetWidth;
+      this.axis.y.isOverflowing = wrapperScrollHeight > wrapperOffsetHeight;
+      this.axis.x.forceVisible = this.options.forceVisible === 'x' || this.options.forceVisible === true;
+      this.axis.y.forceVisible = this.options.forceVisible === 'y' || this.options.forceVisible === true;
+      // Set isOverflowing to false if scrollbar is not necessary (content is shorter than offset)
+      var offsetForXScrollbar = this.axis.x.isOverflowing ? this.scrollbarWidth : 0;
+      var offsetForYScrollbar = this.axis.y.isOverflowing ? this.scrollbarWidth : 0;
+      this.axis.x.isOverflowing = this.axis.x.isOverflowing && wrapperScrollWidth > wrapperOffsetWidth - offsetForYScrollbar;
+      this.axis.y.isOverflowing = this.axis.y.isOverflowing && wrapperScrollHeight > wrapperOffsetHeight - offsetForXScrollbar;
+      this.axis.x.scrollbar.size = this.getScrollbarSize('x');
+      this.axis.y.scrollbar.size = this.getScrollbarSize('y');
+      if (this.axis.x.scrollbar.el) this.axis.x.scrollbar.el.style.width = "".concat(this.axis.x.scrollbar.size, "px");
+      if (this.axis.y.scrollbar.el) this.axis.y.scrollbar.el.style.height = "".concat(this.axis.y.scrollbar.size, "px");
+      this.positionScrollbar('x');
+      this.positionScrollbar('y');
+      this.toggleTrackVisibility('x');
+      this.toggleTrackVisibility('y');
+    }
+    /**
+     * Calculate scrollbar size
+     */
+  }, {
+    key: "getScrollbarSize",
+    value: function getScrollbarSize() {
+      var _this3 = this,
+        _this$axis$axis$track,
+        _this$axis$axis$track2;
+      var axis = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'y';
+      if (!this.axis[axis].isOverflowing || !this.contentEl) {
+        return 0;
+      }
+      var getContentTarget = function getContentTarget() {
+        var _this3$options$delega2;
+        if (axis === 'x') {
+          var _this3$options$delega;
+          return (_this3$options$delega = _this3.options.delegateXContent) !== null && _this3$options$delega !== void 0 ? _this3$options$delega : _this3.contentEl;
+        }
+        return (_this3$options$delega2 = _this3.options.delegateYContent) !== null && _this3$options$delega2 !== void 0 ? _this3$options$delega2 : _this3.contentEl;
+      };
+      var contentSize = getContentTarget()[this.axis[axis].scrollSizeAttr];
+      var trackSize = (_this$axis$axis$track = (_this$axis$axis$track2 = this.axis[axis].track.el) === null || _this$axis$axis$track2 === void 0 ? void 0 : _this$axis$axis$track2[this.axis[axis].offsetSizeAttr]) !== null && _this$axis$axis$track !== void 0 ? _this$axis$axis$track : 0;
+      var scrollbarRatio = trackSize / contentSize;
+      var scrollbarSize;
+      // Calculate new height/position of drag handle.
+      scrollbarSize = Math.max(~~(scrollbarRatio * trackSize), this.options.scrollbarMinSize);
+      if (this.options.scrollbarMaxSize) {
+        scrollbarSize = Math.min(scrollbarSize, this.options.scrollbarMaxSize);
+      }
+      return scrollbarSize;
+    }
+  }, {
+    key: "positionScrollbar",
+    value: function positionScrollbar() {
+      var _this$axis$axis$track3, _SimpleBarCore$getRtl2;
+      var axis = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'y';
+      var scrollbar = this.axis[axis].scrollbar;
+      if (!this.axis[axis].isOverflowing || !this.wrapperEl || !scrollbar.el || !this.elStyles) {
+        return;
+      }
+      var contentSize = this.wrapperEl[this.axis[axis].scrollSizeAttr];
+      var trackSize = ((_this$axis$axis$track3 = this.axis[axis].track.el) === null || _this$axis$axis$track3 === void 0 ? void 0 : _this$axis$axis$track3[this.axis[axis].offsetSizeAttr]) || 0;
+      var hostSize = parseInt(this.elStyles[this.axis[axis].sizeAttr], 10);
+      var scrollOffset = this.wrapperScrollValue[this.axis[axis].scrollOffsetAttr];
+      scrollOffset = axis === 'x' && this.isRtl && (_SimpleBarCore$getRtl2 = SimpleBarCore.getRtlHelpers()) !== null && _SimpleBarCore$getRtl2 !== void 0 && _SimpleBarCore$getRtl2.isScrollOriginAtZero ? -scrollOffset : scrollOffset;
+      if (axis === 'x' && this.isRtl) {
+        var _SimpleBarCore$getRtl3;
+        scrollOffset = (_SimpleBarCore$getRtl3 = SimpleBarCore.getRtlHelpers()) !== null && _SimpleBarCore$getRtl3 !== void 0 && _SimpleBarCore$getRtl3.isScrollingToNegative ? scrollOffset : -scrollOffset;
+      }
+      var scrollPourcent = scrollOffset / (contentSize - hostSize);
+      var handleOffset = ~~((trackSize - scrollbar.size) * scrollPourcent);
+      handleOffset = axis === 'x' && this.isRtl ? -handleOffset + (trackSize - scrollbar.size) : handleOffset;
+      var scrollAttr = this.axis[axis].scrollOffsetAttr;
+      Object.assign(this.wrapperScrollMap, _defineProperty({}, scrollAttr, handleOffset));
+      scrollbar.el.style.transform = axis === 'x' ? "translate3d(".concat(handleOffset, "px, 0, 0)") : "translate3d(0, ".concat(handleOffset, "px, 0)");
+    }
+  }, {
+    key: "toggleTrackVisibility",
+    value: function toggleTrackVisibility() {
+      var axis = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'y';
+      var track = this.axis[axis].track.el;
+      var scrollbar = this.axis[axis].scrollbar.el;
+      if (!track || !scrollbar || !this.wrapperEl) return;
+      if (this.axis[axis].isOverflowing || this.axis[axis].forceVisible) {
+        track.style.visibility = 'visible';
+        // this.wrapperEl.style[this.axis[axis].overflowAttr] = 'scroll';
+        this.el.classList.add("".concat(this.classNames.scrollable, "-").concat(axis));
+      } else {
+        track.style.visibility = 'hidden';
+        // this.wrapperEl.style[this.axis[axis].overflowAttr] = 'hidden';
+        this.el.classList.remove("".concat(this.classNames.scrollable, "-").concat(axis));
+      }
+      // Even if forceVisible is enabled, scrollbar itself should be hidden
+      if (this.axis[axis].isOverflowing) {
+        scrollbar.style.display = 'block';
+      } else {
+        scrollbar.style.display = 'none';
+      }
+    }
+  }, {
+    key: "showScrollbar",
+    value: function showScrollbar() {
+      var axis = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'y';
+      if (this.axis[axis].isOverflowing && !this.axis[axis].scrollbar.isVisible) {
+        scrollbar_core_addClasses(this.axis[axis].scrollbar.el, this.classNames.visible);
+        this.axis[axis].scrollbar.isVisible = true;
+      }
+    }
+  }, {
+    key: "hideScrollbar",
+    value: function hideScrollbar() {
+      var axis = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'y';
+      if (this.isDragging) return;
+      if (this.axis[axis].isOverflowing && this.axis[axis].scrollbar.isVisible) {
+        scrollbar_core_removeClasses(this.axis[axis].scrollbar.el, this.classNames.visible);
+        this.axis[axis].scrollbar.isVisible = false;
+      }
+    }
+  }, {
+    key: "onMouseMoveForAxis",
+    value: function onMouseMoveForAxis() {
+      var axis = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'y';
+      var currentAxis = this.axis[axis];
+      if (!currentAxis.track.el || !currentAxis.scrollbar.el) return;
+      currentAxis.track.rect = currentAxis.track.el.getBoundingClientRect();
+      currentAxis.scrollbar.rect = currentAxis.scrollbar.el.getBoundingClientRect();
+      if (this.isWithinBounds(currentAxis.track.rect)) {
+        this.showScrollbar(axis);
+        scrollbar_core_addClasses(currentAxis.track.el, this.classNames.hover);
+        if (this.isWithinBounds(currentAxis.scrollbar.rect)) {
+          scrollbar_core_addClasses(currentAxis.scrollbar.el, this.classNames.hover);
+        } else {
+          if (!this.isDragging) {
+            scrollbar_core_removeClasses(currentAxis.scrollbar.el, this.classNames.hover);
+          }
+        }
+      } else {
+        if (!this.isDragging) {
+          scrollbar_core_removeClasses(currentAxis.track.el, this.classNames.hover);
+        }
+        if (this.options.autoHide) {
+          this.hideScrollbar(axis);
+        }
+      }
+    }
+  }, {
+    key: "onMouseLeaveForAxis",
+    value: function onMouseLeaveForAxis() {
+      var axis = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'y';
+      if (this.isDragging) {
+        return;
+      }
+      scrollbar_core_removeClasses(this.axis[axis].track.el, this.classNames.hover);
+      scrollbar_core_removeClasses(this.axis[axis].scrollbar.el, this.classNames.hover);
+      if (this.options.autoHide) {
+        this.hideScrollbar(axis);
+      }
+    }
+  }, {
+    key: "onDragStart",
+    value:
+    /**
+     * on scrollbar handle drag movement starts
+     */
+    function onDragStart(e) {
+      var _scrollbar$rect;
+      var axis = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'y';
+      this.isDragging = true;
+      var elDocument = scrollbar_core_getElementDocument(this.el);
+      var elWindow = scrollbar_core_getElementWindow(this.el);
+      var scrollbar = this.axis[axis].scrollbar;
+      // Measure how far the user's mouse is from the top of the scrollbar drag handle.
+      var eventOffset = axis === 'y' ? e.pageY : e.pageX;
+      this.axis[axis].dragOffset = eventOffset - (((_scrollbar$rect = scrollbar.rect) === null || _scrollbar$rect === void 0 ? void 0 : _scrollbar$rect[this.axis[axis].offsetAttr]) || 0);
+      this.draggedAxis = axis;
+      scrollbar_core_addClasses(this.el, this.classNames.dragging);
+      elDocument.addEventListener('mousemove', this.drag, true);
+      elDocument.addEventListener('mouseup', this.onEndDrag, true);
+      if (this.removePreventClickId === null) {
+        elDocument.addEventListener('click', this.preventClick, true);
+        elDocument.addEventListener('dblclick', this.preventClick, true);
+      } else {
+        elWindow.clearTimeout(this.removePreventClickId);
+        this.removePreventClickId = null;
+      }
+    }
+  }, {
+    key: "onTrackClick",
+    value: function onTrackClick(e) {
+      var _scrollbar$rect$this$,
+        _scrollbar$rect2,
+        _this$wrapperScrollMa,
+        _this4 = this;
+      var axis = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'y';
+      var currentAxis = this.axis[axis];
+      if (!this.options.clickOnTrack || !currentAxis.scrollbar.el || !this.wrapperEl) return;
+      // Preventing the event's default to trigger click underneath
+      e.preventDefault();
+      var elWindow = scrollbar_core_getElementWindow(this.el);
+      this.axis[axis].scrollbar.rect = currentAxis.scrollbar.el.getBoundingClientRect();
+      var scrollbar = this.axis[axis].scrollbar;
+      var scrollbarOffset = (_scrollbar$rect$this$ = (_scrollbar$rect2 = scrollbar.rect) === null || _scrollbar$rect2 === void 0 ? void 0 : _scrollbar$rect2[this.axis[axis].offsetAttr]) !== null && _scrollbar$rect$this$ !== void 0 ? _scrollbar$rect$this$ : 0;
+      var rect = this.wrapperEl.getBoundingClientRect();
+      // 获取鼠标相对于视口的位置
+      var x = e.clientX;
+      var y = e.clientY;
+      // 计算鼠标相对于目标元素的相对位置
+      var relativeX = x - rect.left;
+      var relativeY = y - rect.top;
+      var hostSize = axis === 'y' ? relativeY : relativeX;
+      var scrolled = (_this$wrapperScrollMa = this.wrapperScrollMap[this.axis[axis].scrollOffsetAttr]) !== null && _this$wrapperScrollMa !== void 0 ? _this$wrapperScrollMa : 0;
+      var t = axis === 'y' ? this.mouseY - scrollbarOffset : this.mouseX - scrollbarOffset;
+      var dir = t < 0 ? -1 : 1;
+      var scrollSize = dir === -1 ? scrolled - hostSize : hostSize - scrolled;
+      var speed = scrollSize > 40 ? 40 : scrollSize;
+      var scrollTo = function scrollTo() {
+        if (!_this4.wrapperEl) return;
+        if (scrollSize > 0) {
+          scrolled = scrolled + dir * speed;
+          scrollSize -= speed;
+          var resolvedValue = _this4.getPointerPosition(scrolled, axis);
+          _this4.scrollToAxisPosition(resolvedValue, axis);
+          elWindow.requestAnimationFrame(scrollTo);
+        }
+      };
+      scrollTo();
+    }
+    /**
+     * Getter for content element
+     */
+  }, {
+    key: "getContentElement",
+    value: function getContentElement() {
+      return this.contentEl;
+    }
+    /**
+     * Getter for original scrolling element
+     */
+  }, {
+    key: "getScrollElement",
+    value: function getScrollElement() {
+      return this.wrapperEl;
+    }
+  }, {
+    key: "removeListeners",
+    value: function removeListeners() {
+      var _this$mouseWheelInsta2;
+      var elWindow = scrollbar_core_getElementWindow(this.el);
+      (_this$mouseWheelInsta2 = this.mouseWheelInstance) === null || _this$mouseWheelInsta2 === void 0 || _this$mouseWheelInsta2.removeWheelEvent(this.el);
+      // Event listeners
+      this.el.removeEventListener('mouseenter', this.onMouseEnter);
+      this.el.removeEventListener('pointerdown', this.onPointerEvent, true);
+      this.el.removeEventListener('mousemove', this.onMouseMove);
+      this.el.removeEventListener('mouseleave', this.onMouseLeave);
+      if (this.wrapperEl) {
+        this.wrapperEl.removeEventListener('scroll', this.onScroll);
+      }
+      elWindow.removeEventListener('resize', this.onWindowResize);
+      if (this.mutationObserver) {
+        this.mutationObserver.disconnect();
+      }
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+      }
+      // Cancel all debounced functions
+      this.onMouseMove.cancel();
+      this.onWindowResize.cancel();
+      this.onStopScrolling.cancel();
+      this.onMouseEntered.cancel();
+    }
+    /**
+     * Remove all listeners from DOM nodes
+     */
+  }, {
+    key: "unMount",
+    value: function unMount() {
+      this.removeListeners();
+    }
+    /**
+     * Check if mouse is within bounds
+     */
+  }, {
+    key: "isWithinBounds",
+    value: function isWithinBounds(bbox) {
+      return this.mouseX >= bbox.left && this.mouseX <= bbox.left + bbox.width && this.mouseY >= bbox.top && this.mouseY <= bbox.top + bbox.height;
+    }
+    /**
+     * Find element children matches query
+     */
+  }, {
+    key: "findChild",
+    value: function findChild(el, query) {
+      var matches = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
+      return Array.prototype.filter.call(el.children, function (child) {
+        return matches.call(child, query);
+      })[0];
+    }
+  }], [{
+    key: "getRtlHelpers",
+    value:
+    /**
+     * Helper to fix browsers inconsistency on RTL:
+     *  - Firefox inverts the scrollbar initial position
+     *  - IE11 inverts both scrollbar position and scrolling offset
+     */
+    function getRtlHelpers() {
+      if (SimpleBarCore.rtlHelpers) {
+        return SimpleBarCore.rtlHelpers;
+      }
+      var dummyDiv = document.createElement('div');
+      dummyDiv.innerHTML = '<div class="simplebar-dummy-scrollbar-size"><div></div></div>';
+      var scrollbarDummyEl = dummyDiv.firstElementChild;
+      var dummyChild = scrollbarDummyEl === null || scrollbarDummyEl === void 0 ? void 0 : scrollbarDummyEl.firstElementChild;
+      if (!dummyChild) return null;
+      document.body.appendChild(scrollbarDummyEl);
+      scrollbarDummyEl.scrollLeft = 0;
+      var dummyContainerOffset = SimpleBarCore.getOffset(scrollbarDummyEl);
+      var dummyChildOffset = SimpleBarCore.getOffset(dummyChild);
+      scrollbarDummyEl.scrollLeft = -999;
+      var dummyChildOffsetAfterScroll = SimpleBarCore.getOffset(dummyChild);
+      document.body.removeChild(scrollbarDummyEl);
+      SimpleBarCore.rtlHelpers = {
+        // determines if the scrolling is responding with negative values
+        isScrollOriginAtZero: dummyContainerOffset.left !== dummyChildOffset.left,
+        // determines if the origin scrollbar position is inverted or not (positioned on left or right)
+        isScrollingToNegative: dummyChildOffset.left !== dummyChildOffsetAfterScroll.left
+      };
+      return SimpleBarCore.rtlHelpers;
+    }
+  }, {
+    key: "getOffset",
+    value: function getOffset(el) {
+      var rect = el.getBoundingClientRect();
+      var elDocument = scrollbar_core_getElementDocument(el);
+      var elWindow = scrollbar_core_getElementWindow(el);
+      return {
+        top: rect.top + (elWindow.pageYOffset || elDocument.documentElement.scrollTop),
+        left: rect.left + (elWindow.pageXOffset || elDocument.documentElement.scrollLeft)
+      };
+    }
+  }]);
+}();
+_defineProperty(SimpleBarCore, "rtlHelpers", null);
+_defineProperty(SimpleBarCore, "defaultOptions", {
+  forceVisible: false,
+  clickOnTrack: true,
+  scrollbarMinSize: 25,
+  scrollbarMaxSize: 0,
+  ariaLabel: 'scrollable content',
+  classNames: {
+    contentEl: 'simplebar-content',
+    wrapper: 'simplebar-wrapper',
+    scrollbar: 'simplebar-scrollbar',
+    track: 'simplebar-track',
+    visible: 'simplebar-visible',
+    horizontal: 'simplebar-horizontal',
+    vertical: 'simplebar-vertical',
+    hover: 'simplebar-hover',
+    dragging: 'simplebar-dragging',
+    scrolling: 'simplebar-scrolling',
+    scrollable: 'simplebar-scrollable',
+    mouseEntered: 'simplebar-mouse-entered'
+  },
+  scrollableNode: null,
+  contentNode: null,
+  wrapperNode: null,
+  /**
+   * 如果是自定义虚拟滚动，content可能是position absolute，此时需要一个实际支撑的元素
+   */
+  delegateXContent: null,
+  delegateYContent: null,
+  autoHide: true,
+  useSystemScrollXBehavior: true,
+  useSystemScrollYBehavior: true,
+  onScrollCallback: null
+});
+/**
+ * Static functions
+ */
+_defineProperty(SimpleBarCore, "helpers", helpers_namespaceObject);
+
+;// CONCATENATED MODULE: ../../packages/virtual-render/src/bk-scrollbar.ts
+
+
 
 
-function toPropertyKey(t) {
-  var i = toPrimitive(t, "string");
-  return "symbol" == _typeof(i) ? i : String(i);
-}
-;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/defineProperty.js
 
-function _defineProperty(obj, key, value) {
-  key = toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-;// CONCATENATED MODULE: external "vue"
-var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var external_vue_y = x => () => x
-const external_vue_namespaceObject = external_vue_x({ ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["h"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.h, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["onUnmounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onUnmounted, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch });
-;// CONCATENATED MODULE: external "../config-provider"
-var config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var config_provider_y = x => () => x
-const config_provider_namespaceObject = config_provider_x({ ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__.usePrefix });
-;// CONCATENATED MODULE: ../../packages/virtual-render/src/props.ts
 
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /*
  * Tencent is pleased to support the open source community by making
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
@@ -157,174 +2200,153 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * IN THE SOFTWARE.
  */
 
-var EventProps = {
-  onContentScroll: Function
-};
-var virtualRenderProps = _objectSpread({
-  /** 传入原始数据源 */
-  list: shared_namespaceObject.PropTypes.array.def([]),
-  /**
-   * 是否启用此功能
-   * 如果设置为false，则此组件只会渲染两层指定的 容器，默认渲染两层 div
-   * 设置为true才会启用所有的虚拟渲染 & 滚动相关计算
-   * 此属性设置为了兼容需要按需开启\关闭虚拟渲染场景，避免外层设计两套样式架构
-   * Note: 目前此属性不支持动态修改
-   */
-  enabled: shared_namespaceObject.PropTypes.bool.def(true),
-  /**
-   * 是否启用内置的Scroll Listener
-   * 当启用虚拟滚动时（enabled = true），滚动监听为内置生效
-   * 只有当（enabled = false)时此配置项才生效
-   */
-  scrollEvent: shared_namespaceObject.PropTypes.bool.def(false),
-  /**
-   * 每行数据高度
-   * 默认为数值类型，默认高度 30px
-   * 如果每行高度不一致，可为回调函数：(index: number, row: any[]): number => {}
-   * 函数参数为当前行index & 当前行数据 row，row为数组，当不分组时，为当前行item
-   * 如果有分组展示， index 为当前分组 index， row为数组，当前行分组所有 item 数据
-   */
-  lineHeight: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.number, shared_namespaceObject.PropTypes.func]).def(30),
-  /** 整体最小高度 */
-  minHeight: shared_namespaceObject.PropTypes.number.def(30),
-  /** 整体最大高度 */
-  maxHeight: shared_namespaceObject.PropTypes.number,
-  /**
-   * 整体高度
-   * 可设置具体值，如果设置为 100%，则组件会自动计算外层DOM元素offsetHeight，用于计算可渲染行数
-   */
-  height: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.string.def('100%'), shared_namespaceObject.PropTypes.number]).def('100%'),
-  /**
-   * 渲染区域宽度
-   * 如果设置 100% 则自适应外层元素宽度
-   */
-  width: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.string.def('100%'), shared_namespaceObject.PropTypes.number]).def('100%'),
-  /** 最外层元素ClassName */
-  className: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.arrayOf(shared_namespaceObject.PropTypes.string), shared_namespaceObject.PropTypes.object, shared_namespaceObject.PropTypes.arrayOf(shared_namespaceObject.PropTypes.object), shared_namespaceObject.PropTypes.string]).def(''),
-  /** 内层层元素ClassName */
-  contentClassName: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.arrayOf(shared_namespaceObject.PropTypes.string), shared_namespaceObject.PropTypes.object, shared_namespaceObject.PropTypes.arrayOf(shared_namespaceObject.PropTypes.object), shared_namespaceObject.PropTypes.string]).def(''),
-  /** 内层元素样式 */
-  contentStyle: shared_namespaceObject.PropTypes.object.def({}),
-  /** 用于自定义X轴滚动条样式 */
-  scrollXName: shared_namespaceObject.PropTypes.string.def((0,shared_namespaceObject.resolveClassName)('F-scroll-x')),
-  /** 用于自定义Y轴滚动条样式 */
-  scrollYName: shared_namespaceObject.PropTypes.string.def((0,shared_namespaceObject.resolveClassName)('F-scroll-y')),
-  /** 分组展示，一行数据可能有多条数据 */
-  groupItemCount: shared_namespaceObject.PropTypes.number.def(1),
-  /** 预加载行数，避免空白渲染 */
-  preloadItemCount: shared_namespaceObject.PropTypes.number.def(1),
-  /** 外层Dom元素需要渲染成的目标元素 */
-  renderAs: shared_namespaceObject.PropTypes.string.def('div'),
-  /** 内容层渲染成目标元素 */
-  contentAs: shared_namespaceObject.PropTypes.string.def('div'),
-  /** top 滚动填充 */
-  scrollOffsetTop: shared_namespaceObject.PropTypes.number.def(0),
-  /**
-   * 内置滚动位置
-   * 可选：container （最外层容器），content（内容层容器）
-   * Note: container 慎选，需要自己处理样式 & 位置
-   */
-  scrollPosition: shared_namespaceObject.PropTypes.string.def('content'),
-  /**
-   * 绝对高度 | 实际高估
-   * 可选值： auto(根据行高和行数计算, LineHeight * List.length) number(外层给定高度，若为0，则不显示)
-   */
-  abosuteHeight: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.string.def('auto'), shared_namespaceObject.PropTypes.number]).def('auto'),
-  /**
-   * 滚动刷新计算间隔时间
-   * 默认60 ms
-   */
-  throttleDelay: shared_namespaceObject.PropTypes.number.def(60),
-  rowKey: shared_namespaceObject.PropTypes.string.def(undefined),
-  /**
-   * 数据改变时是否保持之前的状态
-   * 保持滚动条位置、当前渲染区间
-   */
-  keepAlive: shared_namespaceObject.PropTypes.bool.def(false),
-  /**
-   * 数据监听改变时，是否自动重置位置到[0, 0]
-   */
-  autoReset: shared_namespaceObject.PropTypes.bool.def(true),
-  wrapperStyle: shared_namespaceObject.PropTypes.any.def({})
-}, EventProps);
-;// CONCATENATED MODULE: ../../packages/virtual-render/src/use-fix-top.tsx
-/* harmony default export */ const use_fix_top = (function (props, refRoot) {
-  var scrollTo = function scrollTo() {
-    var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-      left: 0,
-      top: 0
-    };
-    var left = option.left,
-      top = option.top;
-    refRoot.value.scrollTo(left, top);
-  };
-  /**
-   * 指定元素滚动到顶部
-   * @param param0
-   */
-  var fixToTop = function fixToTop(params) {
-    var id = params.id,
-      index = params.index,
-      item = params.item;
-    var targetIndex = typeof index === 'number' ? index - 1 : 0;
-    if (id !== undefined) {
-      var _props$list$findIndex;
-      targetIndex = (_props$list$findIndex = props.list.findIndex(function (row) {
-        return row[props.rowKey] === id;
-      })) !== null && _props$list$findIndex !== void 0 ? _props$list$findIndex : targetIndex;
+var _SimpleBarCore$helper = SimpleBarCore.helpers,
+  bk_scrollbar_addClasses = _SimpleBarCore$helper.addClasses,
+  bk_scrollbar_classNamesToQuery = _SimpleBarCore$helper.classNamesToQuery;
+var BkSimpleBar = /*#__PURE__*/function (_SimpleBarCore) {
+  function BkSimpleBar() {
+    var _this;
+    _classCallCheck(this, BkSimpleBar);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
-    if (item !== undefined) {
-      var _props$list$findIndex2;
-      targetIndex = (_props$list$findIndex2 = props.list.findIndex(function (row) {
-        return item[props.rowKey] === row[props.rowKey];
-      })) !== null && _props$list$findIndex2 !== void 0 ? _props$list$findIndex2 : targetIndex;
+    _this = _callSuper(this, BkSimpleBar, [].concat(args));
+    // // Save a reference to the instance, so we know this DOM node has already been instancied
+    BkSimpleBar.instances.set(args[0], _this);
+    return _this;
+  }
+  _inherits(BkSimpleBar, _SimpleBarCore);
+  return _createClass(BkSimpleBar, [{
+    key: "initDOM",
+    value: function initDOM() {
+      var _this$options$wrapper, _this$options$content;
+      this.wrapperEl = (_this$options$wrapper = this.options.wrapperNode) !== null && _this$options$wrapper !== void 0 ? _this$options$wrapper : this.createScrollElement(this.classNames.wrapper);
+      this.contentEl = (_this$options$content = this.options.contentNode) !== null && _this$options$content !== void 0 ? _this$options$content : this.createScrollElement(this.classNames.contentEl);
+      this.delegateXContent = this.options.delegateXContent;
+      this.delegateYContent = this.options.delegateYContent;
+      if (!this.axis.x.track.el || !this.axis.y.track.el) {
+        var track = document.createElement('div');
+        var scrollbar = document.createElement('div');
+        bk_scrollbar_addClasses(track, this.classNames.track);
+        bk_scrollbar_addClasses(scrollbar, this.classNames.scrollbar);
+        track.appendChild(scrollbar);
+        this.axis.x.track.el = track.cloneNode(true);
+        bk_scrollbar_addClasses(this.axis.x.track.el, this.classNames.horizontal);
+        this.axis.y.track.el = track.cloneNode(true);
+        bk_scrollbar_addClasses(this.axis.y.track.el, this.classNames.vertical);
+        this.el.appendChild(this.axis.x.track.el);
+        this.el.appendChild(this.axis.y.track.el);
+      }
+      SimpleBarCore.prototype.initDOM.call(this);
     }
-    if (typeof targetIndex === 'number') {
-      var resolvedIndex = targetIndex >= 0 ? targetIndex : 0;
-      var offsetY = resolvedIndex * props.lineHeight;
-      scrollTo({
-        left: 0,
-        top: offsetY
-      });
+  }, {
+    key: "unMount",
+    value: function unMount() {
+      SimpleBarCore.prototype.unMount.call(this);
+      BkSimpleBar.instances["delete"](this.el);
+    }
+  }, {
+    key: "createScrollElement",
+    value: function createScrollElement(className) {
+      var createEl = function createEl() {
+        var el = document.createElement('div');
+        bk_scrollbar_addClasses(el, className);
+        return el;
+      };
+      var origin = this.el.querySelector(bk_scrollbar_classNamesToQuery(className));
+      return origin !== null && origin !== void 0 ? origin : createEl();
+    }
+  }], [{
+    key: "removeObserver",
+    value: function removeObserver() {
+      var _BkSimpleBar$globalOb;
+      (_BkSimpleBar$globalOb = BkSimpleBar.globalObserver) === null || _BkSimpleBar$globalOb === void 0 || _BkSimpleBar$globalOb.disconnect();
+    }
+  }]);
+}(SimpleBarCore);
+_defineProperty(BkSimpleBar, "instances", new WeakMap());
+
+;// CONCATENATED MODULE: ../../packages/virtual-render/src/use-scrollbar.tsx
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+/* harmony default export */ const use_scrollbar = (function (target, props) {
+  var instance = null;
+  var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+    resolveClassName = _usePrefix.resolveClassName;
+  var classNames = {
+    contentEl: resolveClassName('scrollbar-content-el'),
+    wrapper: resolveClassName('scrollbar-wrapper'),
+    scrollbar: resolveClassName('scrollbar'),
+    track: resolveClassName('scrollbar-track'),
+    visible: resolveClassName('scrollbar-visible'),
+    horizontal: resolveClassName('scrollbar-horizontal'),
+    vertical: resolveClassName('scrollbar-vertical'),
+    hover: resolveClassName('scrollbar-hover'),
+    dragging: resolveClassName('scrollbar-dragging'),
+    scrolling: resolveClassName('scrollbar-scrolling'),
+    scrollable: resolveClassName('scrollbar-scrollable'),
+    mouseEntered: resolveClassName('scrollbar-mouse-entered')
+  };
+  var init = function init(scrollFn, delegateXContent, delegateYContent) {
+    instance = new BkSimpleBar(target.value, {
+      classNames: classNames,
+      wrapperNode: target.value,
+      useSystemScrollYBehavior: !props.enabled,
+      useSystemScrollXBehavior: true,
+      delegateXContent: delegateXContent,
+      delegateYContent: delegateYContent,
+      onScrollCallback: scrollFn
+    });
+    // instance.getScrollElement().addEventListener('scroll', scrollFn);
+  };
+  var scrollTo = function scrollTo(x, y) {
+    var _props$scrollbar;
+    if ((_props$scrollbar = props.scrollbar) !== null && _props$scrollbar !== void 0 && _props$scrollbar.enabled) {
+      // instance.s.scrollTo(x, y, 100, { keepStruct: props.scrollbar?.keepStruct ?? false });
+      return;
     }
+    target.value.scrollTo(x, y);
   };
   return {
-    fixToTop: fixToTop,
-    scrollTo: scrollTo
+    init: init,
+    instance: instance,
+    scrollTo: scrollTo,
+    classNames: classNames
   };
 });
-;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/classCallCheck.js
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/createClass.js
-
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor);
-  }
-}
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  Object.defineProperty(Constructor, "prototype", {
-    writable: false
-  });
-  return Constructor;
-}
 ;// CONCATENATED MODULE: external "lodash/throttle"
 var throttle_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var throttle_y = x => () => x
-const throttle_namespaceObject = throttle_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_lodash_throttle_a7b7506a__["default"] });
+const external_lodash_throttle_namespaceObject = throttle_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_lodash_throttle_a7b7506a__["default"] });
 ;// CONCATENATED MODULE: ../../packages/virtual-render/src/v-virtual-render.ts
 
 
+
 /*
  * Tencent is pleased to support the open source community by making
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
@@ -375,14 +2397,14 @@ function getMatchedIndex(maxCount, maxHeight, groupItemCount, callback) {
     diffHeight: diffHeight
   };
 }
-function computedVirtualIndex(lineHeight, callback, pagination, _el, event) {
-  if (!event.target) {
+function computedVirtualIndex(lineHeight, callback, pagination, wrapper, event) {
+  if (!wrapper || !event.offset) {
     return;
   }
-  var elScrollTop = event.target.scrollTop;
-  var elScrollLeft = event.target.scrollLeft;
-  var elScrollHeight = event.target.scrollHeight;
-  var elOffsetHeight = event.target.offsetHeight;
+  var elScrollTop = event.offset.y;
+  var elScrollLeft = event.offset.x;
+  var elScrollHeight = wrapper.scrollHeight;
+  var elOffsetHeight = wrapper.offsetHeight;
   var count = pagination.count,
     groupItemCount = pagination.groupItemCount;
   var targetStartIndex = 0;
@@ -402,7 +2424,8 @@ function computedVirtualIndex(lineHeight, callback, pagination, _el, event) {
   }
   var bottom = elScrollHeight - elOffsetHeight - elScrollTop;
   typeof callback === 'function' && callback(event, targetStartIndex, targetEndIndex, elScrollTop, translateY, elScrollLeft, {
-    bottom: bottom >= 0 ? bottom : 0
+    bottom: bottom >= 0 ? bottom : 0,
+    scrollbar: event
   });
   return {
     targetStartIndex: targetStartIndex,
@@ -414,13 +2437,39 @@ function computedVirtualIndex(lineHeight, callback, pagination, _el, event) {
 }
 var VisibleRender = /*#__PURE__*/function () {
   function VisibleRender(binding, el) {
+    var _this = this;
     _classCallCheck(this, VisibleRender);
+    _defineProperty(this, "getEvent", function (event) {
+      var _this$binding$value$s = _this.binding.value.scrollbar,
+        scrollbar = _this$binding$value$s === void 0 ? {
+          enabled: false
+        } : _this$binding$value$s;
+      if (scrollbar.enabled) {
+        var _event$offset;
+        return {
+          offset: (_event$offset = event.offset) !== null && _event$offset !== void 0 ? _event$offset : event
+        };
+      }
+      if (event !== null && event !== void 0 && event.offset) {
+        return {
+          offset: event === null || event === void 0 ? void 0 : event.offset
+        };
+      }
+      var elScrollTop = event.target.scrollTop;
+      var elScrollLeft = event.target.scrollLeft;
+      return {
+        offset: {
+          x: elScrollLeft,
+          y: elScrollTop
+        }
+      };
+    });
     this.binding = binding;
     this.wrapper = el;
     var throttleDelay = binding.value.throttleDelay;
     this.delay = throttleDelay;
   }
-  _createClass(VisibleRender, [{
+  return _createClass(VisibleRender, [{
     key: "render",
     value: function render(e) {
       var _this$binding$value = this.binding.value,
@@ -431,11 +2480,13 @@ var VisibleRender = /*#__PURE__*/function () {
         pagination = _this$binding$value$p === void 0 ? {} : _this$binding$value$p,
         onlyScroll = _this$binding$value.onlyScroll;
       if (onlyScroll) {
-        var elScrollTop = this.wrapper.scrollTop;
-        var elScrollLeft = this.wrapper.scrollLeft;
-        var bottom = this.wrapper.scrollHeight - this.wrapper.offsetHeight - this.wrapper.scrollTop;
+        var _e$offset, _e$offset$x, _e$offset2;
+        var elScrollTop = (_e$offset = e.offset) === null || _e$offset === void 0 ? void 0 : _e$offset.y;
+        var elScrollLeft = (_e$offset$x = (_e$offset2 = e.offset) === null || _e$offset2 === void 0 ? void 0 : _e$offset2.x) !== null && _e$offset$x !== void 0 ? _e$offset$x : 0;
+        var bottom = this.wrapper.scrollHeight - this.wrapper.offsetHeight - elScrollTop;
         handleScrollCallback(e, null, null, elScrollTop, elScrollTop, elScrollLeft, {
-          bottom: bottom >= 0 ? bottom : 0
+          bottom: bottom >= 0 ? bottom : 0,
+          scrollbar: e
         });
         return;
       }
@@ -457,7 +2508,7 @@ var VisibleRender = /*#__PURE__*/function () {
   }, {
     key: "executeThrottledRender",
     value: function executeThrottledRender(e) {
-      (0,throttle_namespaceObject["default"])(this.render.bind(this), this.delay)(e);
+      (0,external_lodash_throttle_namespaceObject["default"])(this.render.bind(this), this.delay)(this.getEvent(e));
     }
   }, {
     key: "install",
@@ -477,7 +2528,6 @@ var VisibleRender = /*#__PURE__*/function () {
       this.binding = binding;
     }
   }]);
-  return VisibleRender;
 }();
 var instance = null;
 /* harmony default export */ const v_virtual_render = ({
@@ -532,28 +2582,46 @@ function use_tag_render_objectSpread(e) { for (var r = 1; r < arguments.length;
 
 
 
+
 /* harmony default export */ const use_tag_render = (function (props, ctx) {
   var renderAs = props.renderAs,
     contentAs = props.contentAs;
+  var refRoot = (0,external_vue_namespaceObject.ref)(null);
+  var _useScrollbar = use_scrollbar(refRoot, props),
+    init = _useScrollbar.init,
+    scrollTo = _useScrollbar.scrollTo,
+    classNames = _useScrollbar.classNames;
+  var contentStyle = (0,external_vue_namespaceObject.reactive)({
+    x: 0,
+    y: 0
+  });
+  var computedStyle = (0,external_vue_namespaceObject.computed)(function () {
+    return use_tag_render_objectSpread({}, props.contentStyle);
+  });
   /** 指令触发Scroll事件，计算当前startIndex & endIndex & scrollTop & translateY */
   var handleScrollCallback = function handleScrollCallback(event, _startIndex, _endIndex, _scrollTop, translateY, scrollLeft, pos) {
+    var scrollbar = pos.scrollbar;
+    if (scrollbar !== null && scrollbar !== void 0 && scrollbar.offset) {
+      var _scrollbar$offset;
+      Object.assign(contentStyle, (_scrollbar$offset = scrollbar === null || scrollbar === void 0 ? void 0 : scrollbar.offset) !== null && _scrollbar$offset !== void 0 ? _scrollbar$offset : {});
+    }
     ctx.emit('content-scroll', [event, {
       translateY: translateY,
       translateX: scrollLeft,
       pos: pos
     }]);
   };
-  var instance = null;
+  var renderInstance = null;
   var binding = (0,external_vue_namespaceObject.computed)(function () {
     return {
       lineHeight: props.lineHeight,
+      scrollbar: props.scrollbar,
       handleScrollCallback: handleScrollCallback,
       pagination: {},
       throttleDelay: props.throttleDelay,
       onlyScroll: props.scrollEvent
     };
   });
-  var refRoot = (0,external_vue_namespaceObject.ref)(null);
   /** 虚拟渲染外层容器样式 */
   var wrapperStyle = (0,external_vue_namespaceObject.computed)(function () {
     var _props$maxHeight;
@@ -565,20 +2633,36 @@ function use_tag_render_objectSpread(e) { for (var r = 1; r < arguments.length;
       maxHeight: (_props$maxHeight = props.maxHeight) !== null && _props$maxHeight !== void 0 ? _props$maxHeight : height
     }, props.wrapperStyle);
   });
-  var _useFixTop = use_fix_top(props, refRoot),
-    scrollTo = _useFixTop.scrollTo,
+  var _useFixTop = use_fix_top(props, scrollTo),
     fixToTop = _useFixTop.fixToTop;
   ctx.expose({
     scrollTo: scrollTo,
     fixToTop: fixToTop
   });
   (0,external_vue_namespaceObject.onMounted)(function () {
-    instance = new VisibleRender(binding, refRoot.value);
-    instance.install();
+    var _props$scrollbar;
+    renderInstance = new VisibleRender(binding, refRoot.value);
+    if ((_props$scrollbar = props.scrollbar) !== null && _props$scrollbar !== void 0 && _props$scrollbar.enabled) {
+      init(renderInstance.executeThrottledRender.bind(renderInstance));
+      return;
+    }
+    renderInstance.install();
   });
   (0,external_vue_namespaceObject.onUnmounted)(function () {
-    var _instance;
-    (_instance = instance) === null || _instance === void 0 || _instance.uninstall();
+    var _renderInstance;
+    (_renderInstance = renderInstance) === null || _renderInstance === void 0 || _renderInstance.uninstall();
+  });
+  var wrapperClassNames = (0,external_vue_namespaceObject.computed)(function () {
+    if (props.scrollbar.enabled) {
+      return [props.className, classNames.wrapper];
+    }
+    return [props.className];
+  });
+  var contentClassNames = (0,external_vue_namespaceObject.computed)(function () {
+    if (props.scrollbar.enabled) {
+      return [props.contentClassName, classNames.contentEl];
+    }
+    return [props.contentClassName];
   });
   return {
     rendAsTag: function rendAsTag() {
@@ -586,12 +2670,12 @@ function use_tag_render_objectSpread(e) { for (var r = 1; r < arguments.length;
       return (0,external_vue_namespaceObject.h)(
       // @ts-ignore:next-line
       renderAs, {
-        "class": props.className,
+        "class": wrapperClassNames.value,
         style: wrapperStyle.value,
         ref: refRoot
       }, [(_ctx$slots$beforeCont = (_ctx$slots$beforeCont2 = (_ctx$slots = ctx.slots).beforeContent) === null || _ctx$slots$beforeCont2 === void 0 ? void 0 : _ctx$slots$beforeCont2.call(_ctx$slots)) !== null && _ctx$slots$beforeCont !== void 0 ? _ctx$slots$beforeCont : '', (0,external_vue_namespaceObject.h)(contentAs, {
-        "class": props.contentClassName,
-        style: props.contentStyle
+        "class": contentClassNames.value,
+        style: computedStyle.value
       }, [(_ctx$slots$default = (_ctx$slots$default2 = (_ctx$slots2 = ctx.slots)["default"]) === null || _ctx$slots$default2 === void 0 ? void 0 : _ctx$slots$default2.call(_ctx$slots2, {
         data: props.list
       })) !== null && _ctx$slots$default !== void 0 ? _ctx$slots$default : '']), (_ctx$slots$afterConte = (_ctx$slots$afterConte2 = (_ctx$slots3 = ctx.slots).afterContent) === null || _ctx$slots$afterConte2 === void 0 ? void 0 : _ctx$slots$afterConte2.call(_ctx$slots3)) !== null && _ctx$slots$afterConte !== void 0 ? _ctx$slots$afterConte : '', (_ctx$slots$afterSecti = (_ctx$slots$afterSecti2 = (_ctx$slots4 = ctx.slots).afterSection) === null || _ctx$slots$afterSecti2 === void 0 ? void 0 : _ctx$slots$afterSecti2.call(_ctx$slots4)) !== null && _ctx$slots$afterSecti !== void 0 ? _ctx$slots$afterSecti : '']);
@@ -640,6 +2724,7 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
 
 
 
+
 /* harmony default export */ const virtual_render = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'VirtualRender',
   directives: {
@@ -671,10 +2756,16 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
         lineHeight: props.lineHeight,
         handleScrollCallback: handleScrollCallback,
         pagination: pagination,
-        throttleDelay: props.throttleDelay
+        throttleDelay: props.throttleDelay,
+        scrollbar: props.scrollbar
       };
     });
     var refRoot = (0,external_vue_namespaceObject.ref)(null);
+    var _useScrollbar = use_scrollbar(refRoot, props),
+      init = _useScrollbar.init,
+      scrollTo = _useScrollbar.scrollTo,
+      classNames = _useScrollbar.classNames;
+    var refVirtualSection = (0,external_vue_namespaceObject.ref)(null);
     var instance = null;
     var pagination = (0,external_vue_namespaceObject.reactive)({
       startIndex: 0,
@@ -717,7 +2808,18 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
       }
     };
     (0,external_vue_namespaceObject.onMounted)(function () {
+      var _props$scrollbar;
       instance = new VisibleRender(binding, refRoot.value);
+      if ((_props$scrollbar = props.scrollbar) !== null && _props$scrollbar !== void 0 && _props$scrollbar.enabled) {
+        init(instance.executeThrottledRender.bind(instance), null, refVirtualSection.value);
+        instance.executeThrottledRender.call(instance, {
+          offset: {
+            x: 0,
+            y: 0
+          }
+        });
+        return;
+      }
       instance.install();
     });
     (0,external_vue_namespaceObject.onUnmounted)(function () {
@@ -781,10 +2883,7 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
     });
     /** 展示列表内容区域样式 */
     var innerContentStyle = (0,external_vue_namespaceObject.computed)(function () {
-      return props.scrollPosition === 'content' ? {
-        top: "".concat(pagination.scrollTop + props.scrollOffsetTop, "px"),
-        transform: "translateY(-".concat(pagination.translateY, "px)")
-      } : {};
+      return props.scrollPosition === 'content' ? {} : {};
     });
     /** 虚拟渲染外层容器样式 */
     var wrapperStyle = (0,external_vue_namespaceObject.computed)(function () {
@@ -809,7 +2908,7 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
       resolveClassName = _usePrefix.resolveClassName;
     /** 外层样式列表 */
     var wrapperClass = (0,external_vue_namespaceObject.computed)(function () {
-      return [resolveClassName('virtual-render'), props.scrollXName, props.scrollYName].concat(_toConsumableArray(resolvePropClassName(props.className)), [props.scrollPosition === 'container' ? resolveClassName('virtual-content') : '']);
+      return [resolveClassName('virtual-render')].concat(_toConsumableArray(resolvePropClassName(props.className)), [props.scrollPosition === 'container' ? resolveClassName('virtual-content') : '']);
     });
     /** 内容区域样式列表 */
     var innerClass = (0,external_vue_namespaceObject.computed)(function () {
@@ -820,20 +2919,33 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
      * @param keepLastPostion
      */
     var reset = function reset() {
+      var _instance2;
       handleChangeListConfig();
       afterListDataReset();
+      (_instance2 = instance) === null || _instance2 === void 0 || _instance2.executeThrottledRender.call(instance, {
+        offset: {
+          x: 0,
+          y: 0
+        }
+      });
     };
-    var _useFixTop = use_fix_top(props, refRoot),
-      scrollTo = _useFixTop.scrollTo,
+    var _useFixTop = use_fix_top(props, scrollTo),
       fixToTop = _useFixTop.fixToTop;
     (0,external_vue_namespaceObject.watch)(function () {
       return [props.lineHeight, props.height, props.list, props.maxHeight];
     }, function () {
-      var _instance2;
-      (_instance2 = instance) === null || _instance2 === void 0 || _instance2.setBinding(binding);
+      var _instance3;
+      (_instance3 = instance) === null || _instance3 === void 0 || _instance3.setBinding(binding);
       handleChangeListConfig();
       (0,external_vue_namespaceObject.nextTick)(function () {
+        var _instance4;
         afterListDataReset();
+        (_instance4 = instance) === null || _instance4 === void 0 || _instance4.executeThrottledRender.call(instance, {
+          offset: {
+            x: 0,
+            y: 0
+          }
+        });
       });
     }, {
       deep: true,
@@ -850,14 +2962,15 @@ function virtual_render_objectSpread(e) { for (var r = 1; r < arguments.length;
       // @ts-ignore:next-line
       renderAs || 'div', {
         ref: refRoot,
-        "class": wrapperClass.value,
+        "class": [].concat(_toConsumableArray(wrapperClass.value), [classNames.wrapper]),
         style: wrapperStyle.value
       }, [(_ctx$slots$beforeCont = (_ctx$slots$beforeCont2 = (_ctx$slots = ctx.slots).beforeContent) === null || _ctx$slots$beforeCont2 === void 0 ? void 0 : _ctx$slots$beforeCont2.call(_ctx$slots)) !== null && _ctx$slots$beforeCont !== void 0 ? _ctx$slots$beforeCont : '', (0,external_vue_namespaceObject.h)(contentAs || 'div', {
-        "class": innerClass.value,
+        "class": [].concat(_toConsumableArray(innerClass.value), [classNames.contentEl]),
         style: virtual_render_objectSpread(virtual_render_objectSpread({}, innerContentStyle.value), props.contentStyle)
       }, [(_ctx$slots$default = (_ctx$slots$default2 = (_ctx$slots2 = ctx.slots)["default"]) === null || _ctx$slots$default2 === void 0 ? void 0 : _ctx$slots$default2.call(_ctx$slots2, {
         data: calcList.value
       })) !== null && _ctx$slots$default !== void 0 ? _ctx$slots$default : '']), (_ctx$slots$afterConte = (_ctx$slots$afterConte2 = (_ctx$slots3 = ctx.slots).afterContent) === null || _ctx$slots$afterConte2 === void 0 ? void 0 : _ctx$slots$afterConte2.call(_ctx$slots3)) !== null && _ctx$slots$afterConte !== void 0 ? _ctx$slots$afterConte : '', (0,external_vue_namespaceObject.h)('div', {
+        ref: refVirtualSection,
         "class": [resolveClassName('virtual-section')],
         style: innerStyle.value
       }), (_ctx$slots$afterSecti = (_ctx$slots$afterSecti2 = (_ctx$slots4 = ctx.slots).afterSection) === null || _ctx$slots$afterSecti2 === void 0 ? void 0 : _ctx$slots$afterSecti2.call(_ctx$slots4)) !== null && _ctx$slots$afterSecti !== void 0 ? _ctx$slots$afterSecti : '']);