vxe-pc-ui 3.20.8 → 3.20.10

package/lib/index.umd.js

@@ -11377,6 +11377,7 @@ __webpack_require__.d(__webpack_exports__, {
   handleCheckInfo: function() { return /* reexport */ handleCheckInfo; },
   hasComponent: function() { return /* reexport */ hasComponent; },
   hasLanguage: function() { return /* reexport */ hasLanguage; },
+  initVScrollbarMixin: function() { return /* reexport */ initVScrollbarMixin; },
   install: function() { return /* reexport */ install; },
   interceptor: function() { return /* reexport */ interceptor; },
   loading: function() { return /* reexport */ components_loading; },
@@ -11402,6 +11403,7 @@ __webpack_require__.d(__webpack_exports__, {
   setup: function() { return /* reexport */ setup; },
   sizeMixin: function() { return /* reexport */ sizeMixin; },
   use: function() { return /* reexport */ use; },
+  vScrollbarMixin: function() { return /* reexport */ vScrollbarMixin; },
   validators: function() { return /* reexport */ validators; },
   version: function() { return /* reexport */ ui_version; },
   watermark: function() { return /* reexport */ components_watermark; }
@@ -11634,6 +11636,7 @@ __webpack_require__.d(components_namespaceObject, {
   handleCheckInfo: function() { return handleCheckInfo; },
   hasComponent: function() { return hasComponent; },
   hasLanguage: function() { return hasLanguage; },
+  initVScrollbarMixin: function() { return initVScrollbarMixin; },
   install: function() { return install; },
   interceptor: function() { return interceptor; },
   loading: function() { return components_loading; },
@@ -11659,6 +11662,7 @@ __webpack_require__.d(components_namespaceObject, {
   setup: function() { return setup; },
   sizeMixin: function() { return sizeMixin; },
   use: function() { return use; },
+  vScrollbarMixin: function() { return vScrollbarMixin; },
   validators: function() { return validators; },
   version: function() { return ui_version; },
   watermark: function() { return components_watermark; }
@@ -11702,7 +11706,7 @@ var es_regexp_exec = __webpack_require__(7495);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.match.js
 var es_string_match = __webpack_require__(1761);
 ;// ./node_modules/@vxe-ui/core/es/src/core.js
-var coreVersion = "3.4.33";
+var coreVersion = "3.4.35";
 var VxeCore = {
   coreVersion: coreVersion,
   uiVersion: '',
@@ -12463,7 +12467,7 @@ function createLog(type, name) {
     return msg;
   };
 }
-var version = "3.4.33";
+var version = "3.4.35";
 var log = {
   create: createLog,
   warn: createLog('warn', "v".concat(version)),
@@ -13394,6 +13398,26 @@ var popperUtils = {
 ;// ./node_modules/@vxe-ui/core/es/src/mixins.js
 
 
+
+
+
+var getThumbOffsetSize = scrollbarUtils.getThumbOffsetSize,
+  getThumbSize = scrollbarUtils.getThumbSize,
+  getScrollFromClick = scrollbarUtils.getScrollFromClick,
+  getScrollFromDrag = scrollbarUtils.getScrollFromDrag;
+function getVmInternalData($xeVm) {
+  // 新版本 $xeVm.internalData
+  // 老版本 $xeVm
+  return $xeVm.internalData || $xeVm;
+}
+function getVmReactData($xeVm) {
+  // 新版本 $xeVm.reactData
+  // 老版本 $xeVm
+  return $xeVm.reactData || $xeVm;
+}
+/**
+ * 组件尺寸上下文
+ */
 var sizeMixin = external_commonjs_vue_commonjs2_vue_root_Vue_default().extend({
   inject: {
     $xeSizeInfo: {
@@ -13418,6 +13442,9 @@ var sizeMixin = external_commonjs_vue_commonjs2_vue_root_Vue_default().extend({
     }
   }
 });
+/**
+ * 权限码处理
+ */
 var permissionMixin = external_commonjs_vue_commonjs2_vue_root_Vue_default().extend({
   computed: {
     computePermissionInfo: function computePermissionInfo() {
@@ -13425,9 +13452,216 @@ var permissionMixin = external_commonjs_vue_commonjs2_vue_root_Vue_default().ext
     }
   }
 });
+/**
+ * 虚拟滚动条是否启用
+ */
+var vScrollbarMixin = external_commonjs_vue_commonjs2_vue_root_Vue_default().extend({
+  inject: {
+    $xeVmInfo: {
+      default: null
+    }
+  },
+  provide: function provide() {
+    var _this2 = this;
+    return {
+      $xeVmInfo: {
+        getIsVScrollbar: function getIsVScrollbar() {
+          return _this2.computeIsVScrollbar;
+        }
+      }
+    };
+  },
+  computed: {
+    computeIsVScrollbar: function computeIsVScrollbar() {
+      var useScrollbar = this.useScrollbar;
+      var $xeVmInfo = this.$xeVmInfo;
+      return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(useScrollbar) ? useScrollbar : $xeVmInfo ? $xeVmInfo.getIsVScrollbar() : null;
+    }
+  }
+});
+var initVScrollbarMixin = external_commonjs_vue_commonjs2_vue_root_Vue_default().extend(Object.assign(Object.assign({}, {}), {
+  methods: {
+    updateThumbSize: function updateThumbSize() {
+      var $xeVm = this;
+      var reactData = getVmReactData($xeVm);
+      var viewEl = $xeVm.getScrollViewElem();
+      if (!viewEl) {
+        return;
+      }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return;
+      }
+      var trackXEl = $xeVm.$refs.refTrackXElem;
+      var xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+      var thumbXElem = $xeVm.$refs.refThumbXElem;
+      if (thumbXElem) {
+        thumbXElem.style.width = xThumbWidth + 'px';
+      }
+      reactData.xThumbWidth = xThumbWidth;
+      var trackYEl = $xeVm.$refs.refTrackYElem;
+      var yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+      var thumbYElem = $xeVm.$refs.refThumbYElem;
+      if (thumbYElem) {
+        thumbYElem.style.height = yThumbHeight + 'px';
+      }
+      reactData.yThumbHeight = yThumbHeight;
+    },
+    updateThumbOffset: function updateThumbOffset() {
+      var $xeVm = this;
+      var reactData = getVmReactData($xeVm);
+      var internalData = getVmInternalData($xeVm);
+      var viewEl = $xeVm.getScrollViewElem();
+      if (!viewEl) {
+        return;
+      }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return;
+      }
+      var xThumbWidth = reactData.xThumbWidth,
+        yThumbHeight = reactData.yThumbHeight;
+      var trackXEl = $xeVm.$refs.refTrackXElem;
+      var thumbXElem = $xeVm.$refs.refThumbXElem;
+      var xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
+      internalData.xThumbLeft = xThumbLeft;
+      if (thumbXElem && xThumbWidth) {
+        thumbXElem.style.width = xThumbWidth + 'px';
+        thumbXElem.style.transform = "translateX(".concat(xThumbLeft, "px)");
+      }
+      var trackYEl = $xeVm.$refs.refTrackYElem;
+      var thumbYElem = $xeVm.$refs.refThumbYElem;
+      var yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
+      internalData.yThumbTop = yThumbTop;
+      if (thumbYElem && yThumbHeight) {
+        thumbYElem.style.height = yThumbHeight + 'px';
+        thumbYElem.style.transform = "translateY(".concat(yThumbTop, "px)");
+      }
+    },
+    clickTrackXEvent: function clickTrackXEvent(evnt) {
+      var $xeVm = this;
+      var reactData = getVmReactData($xeVm);
+      var trackEl = evnt.currentTarget;
+      if (trackEl !== evnt.target) {
+        return;
+      }
+      var viewEl = $xeVm.getScrollViewElem();
+      if (!viewEl) {
+        return;
+      }
+      var xThumbWidth = reactData.xThumbWidth;
+      var trackRect = trackEl.getBoundingClientRect();
+      viewEl.scrollTo({
+        left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
+        behavior: 'auto'
+      });
+    },
+    clickTrackYEvent: function clickTrackYEvent(evnt) {
+      var $xeVm = this;
+      var reactData = getVmReactData($xeVm);
+      var trackEl = evnt.currentTarget;
+      if (trackEl !== evnt.target) {
+        return;
+      }
+      var viewEl = $xeVm.getScrollViewElem();
+      if (!viewEl) {
+        return;
+      }
+      var yThumbHeight = reactData.yThumbHeight;
+      var trackRect = trackEl.getBoundingClientRect();
+      viewEl.scrollTo({
+        top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
+        behavior: 'auto'
+      });
+    },
+    pointerdownThumbXEvent: function pointerdownThumbXEvent(evnt) {
+      var $xeVm = this;
+      var reactData = getVmReactData($xeVm);
+      var internalData = getVmInternalData($xeVm);
+      var thumbEl = evnt.currentTarget;
+      internalData.isThumbDrag = true;
+      thumbEl.setPointerCapture(evnt.pointerId);
+      var viewEl = $xeVm.getScrollViewElem();
+      if (!viewEl) {
+        return;
+      }
+      var xThumbWidth = reactData.xThumbWidth;
+      var trackEl = thumbEl.parentElement;
+      var trackRect = trackEl.getBoundingClientRect();
+      var pointerPosition = evnt.clientX - trackRect.left;
+      // 记录 thumb 的偏移
+      var thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    },
+    pointermoveThumbXEvent: function pointermoveThumbXEvent(evnt) {
+      var $xeVm = this;
+      var reactData = getVmReactData($xeVm);
+      var internalData = getVmInternalData($xeVm);
+      var isThumbDrag = internalData.isThumbDrag,
+        thumbDragOffset = internalData.thumbDragOffset;
+      if (isThumbDrag) {
+        var viewEl = $xeVm.getScrollViewElem();
+        if (!viewEl) {
+          return;
+        }
+        var xThumbWidth = reactData.xThumbWidth;
+        var thumbEl = evnt.currentTarget;
+        var trackEl = thumbEl.parentElement;
+        var trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      }
+    },
+    cleatPointerThumbEvent: function cleatPointerThumbEvent(evnt) {
+      var $xeVm = this;
+      var internalData = getVmInternalData($xeVm);
+      var thumbEl = evnt.currentTarget;
+      thumbEl.releasePointerCapture(evnt.pointerId);
+      internalData.isThumbDrag = false;
+    },
+    pointerdownThumbYEvent: function pointerdownThumbYEvent(evnt) {
+      var $xeVm = this;
+      var reactData = getVmReactData($xeVm);
+      var internalData = getVmInternalData($xeVm);
+      var thumbEl = evnt.currentTarget;
+      internalData.isThumbDrag = true;
+      thumbEl.setPointerCapture(evnt.pointerId);
+      var viewEl = $xeVm.getScrollViewElem();
+      if (!viewEl) {
+        return;
+      }
+      var yThumbHeight = reactData.yThumbHeight;
+      var trackEl = thumbEl.parentElement;
+      var trackRect = trackEl.getBoundingClientRect();
+      var pointerPosition = evnt.clientY - trackRect.top;
+      // 记录 thumb 的偏移
+      var thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    },
+    pointermoveThumbYEvent: function pointermoveThumbYEvent(evnt) {
+      var $xeVm = this;
+      var reactData = getVmReactData($xeVm);
+      var internalData = getVmInternalData($xeVm);
+      var isThumbDrag = internalData.isThumbDrag,
+        thumbDragOffset = internalData.thumbDragOffset;
+      if (isThumbDrag) {
+        var viewEl = $xeVm.getScrollViewElem();
+        if (!viewEl) {
+          return;
+        }
+        var yThumbHeight = reactData.yThumbHeight;
+        var thumbEl = evnt.currentTarget;
+        var trackEl = thumbEl.parentElement;
+        var trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      }
+    }
+  }
+}));
 var globalMixins = {
   sizeMixin: sizeMixin,
-  permissionMixin: permissionMixin
+  permissionMixin: permissionMixin,
+  vScrollbarMixin: vScrollbarMixin,
+  initVScrollbarMixin: initVScrollbarMixin
 };
 ;// ./node_modules/@vxe-ui/core/es/index.esm.js
 
@@ -13701,7 +13935,7 @@ var es_array_filter = __webpack_require__(2008);
 
 
 var log_log = VxeUI.log;
-var uiVersion = "ui v".concat("3.20.8");
+var uiVersion = "ui v".concat("3.20.10");
 function createComponentLog(name) {
   var tableVersion = VxeUI.tableVersion ? "table v".concat(VxeUI.tableVersion) : '';
   var ganttVersion = VxeUI.ganttVersion ? "gantt v".concat(VxeUI.ganttVersion) : '';
@@ -13721,7 +13955,7 @@ var errLog = log_log.create('error', uiVersion);
 
 
 
-var ui_version = "3.20.8";
+var ui_version = "3.20.10";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -16846,14 +17080,9 @@ var Loading = VxeLoading;
 var scrollbar_getConfig = VxeUI.getConfig,
   scrollbar_createEvent = VxeUI.createEvent,
   scrollbar_domUtils = VxeUI.domUtils,
-  scrollbar_scrollbarUtils = VxeUI.scrollbarUtils,
   scrollbar_globalResize = VxeUI.globalResize,
   scrollbar_globalEvents = VxeUI.globalEvents,
   scrollbar_renderEmptyElement = VxeUI.renderEmptyElement;
-var getThumbOffsetSize = scrollbar_scrollbarUtils.getThumbOffsetSize,
-  getThumbSize = scrollbar_scrollbarUtils.getThumbSize,
-  getScrollFromClick = scrollbar_scrollbarUtils.getScrollFromClick,
-  getScrollFromDrag = scrollbar_scrollbarUtils.getScrollFromDrag;
 function createReactData() {
   return {
     yThumbHeight: 0,
@@ -16862,7 +17091,7 @@ function createReactData() {
 }
 function createInternalData() {
   return {
-    // resizeObserver: undefined,
+    // scrollObserver: undefined,
     // isThumbDrag: false,
     thumbDragOffset: 0,
     yThumbTop: 0,
@@ -16873,6 +17102,7 @@ function createInternalData() {
 }
 /* harmony default export */ var scrollbar = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeScrollbar',
+  mixins: [globalMixins.sizeMixin, globalMixins.initVScrollbarMixin],
   props: {
     id: [String, Number],
     viewId: [String, Number],
@@ -16945,12 +17175,26 @@ function createInternalData() {
         return scrollbar_getConfig().scrollbar.viewInnerClassName;
       }
     },
+    size: {
+      type: String,
+      default: function _default() {
+        return scrollbar_getConfig().scrollbar.size || scrollbar_getConfig().size;
+      }
+    },
+    /**
+     * 已废弃
+     * @deprecated
+     */
     autoResize: {
       type: Boolean,
       default: function _default() {
         return scrollbar_getConfig().scrollbar.autoResize;
       }
     },
+    /**
+     * 已废弃
+     * @deprecated
+     */
     syncResize: [Boolean, String, Number]
   },
   data: function data() {
@@ -16962,7 +17206,7 @@ function createInternalData() {
       reFlag: 0
     });
   },
-  computed: {
+  computed: _objectSpread2(_objectSpread2({}, {}), {}, {
     computeWrapperStyle: function computeWrapperStyle() {
       var $xeScrollbar = this;
       var props = $xeScrollbar;
@@ -17047,13 +17291,14 @@ function createInternalData() {
         padding = props.padding;
       var yThumbHeight = reactData.yThumbHeight,
         xThumbWidth = reactData.xThumbWidth;
+      var vSize = $xeScrollbar.computeSize;
       var xToTop = $xeScrollbar.computeXToTop;
       var yToLeft = $xeScrollbar.computeYToLeft;
       var xVisible = $xeScrollbar.computeXVisible;
       var yVisible = $xeScrollbar.computeYVisible;
       var xAutoHide = $xeScrollbar.computeXAutoHide;
       var yAutoHide = $xeScrollbar.computeYAutoHide;
-      return scrollbar_domUtils.buildClass(['vxe-scrollbar', theme ? "theme--".concat(theme) : '', "ov-x--".concat(xVisible === false ? 'hidden' : 'visible'), "ov-y--".concat(yVisible === false ? 'hidden' : 'visible'), "sx-pos--".concat(xToTop ? 'top' : 'bottom'), "sy-pos--".concat(yToLeft ? 'left' : 'right'), native ? 'is--native' : 'is--virtual', className], {
+      return scrollbar_domUtils.buildClass(['vxe-scrollbar', vSize ? "size--".concat(vSize) : '', theme ? "theme--".concat(theme) : '', "ov-x--".concat(xVisible === false ? 'hidden' : 'visible'), "ov-y--".concat(yVisible === false ? 'hidden' : 'visible'), "sx-pos--".concat(xToTop ? 'top' : 'bottom'), "sy-pos--".concat(yToLeft ? 'left' : 'right'), native ? 'is--native' : 'is--virtual', className], {
         'is--padding': padding,
         'ov-x--auto-hide': xAutoHide,
         'ov-y--auto-hide': yAutoHide,
@@ -17093,7 +17338,7 @@ function createInternalData() {
       var yOpts = $xeScrollbar.computeYOpts;
       return yOpts.position === 'left';
     }
-  },
+  }),
   methods: {
     //
     // Method
@@ -17104,12 +17349,12 @@ function createInternalData() {
         $scrollbar: $xeScrollbar
       }, params));
     },
-    getViewElem: function getViewElem() {
+    getScrollViewElem: function getScrollViewElem() {
       var $xeScrollbar = this;
       var viewEl = $xeScrollbar.$refs.refViewElem;
       return viewEl || null;
     },
-    getViewInnerElem: function getViewInnerElem() {
+    getScrollViewInnerElem: function getScrollViewInnerElem() {
       var $xeScrollbar = this;
       var viewInnerEl = $xeScrollbar.$refs.refViewInnerElem;
       return viewInnerEl || null;
@@ -17176,60 +17421,6 @@ function createInternalData() {
       $xeScrollbar.updateThumbOffset();
       return $xeScrollbar.$nextTick();
     },
-    updateThumbSize: function updateThumbSize() {
-      var $xeScrollbar = this;
-      var reactData = $xeScrollbar.reactData;
-      var viewEl = $xeScrollbar.$refs.refViewElem;
-      if (!viewEl) {
-        return;
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return;
-      }
-      var trackXEl = $xeScrollbar.$refs.refTrackXElem;
-      var xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
-      var thumbXElem = $xeScrollbar.$refs.refThumbXElem;
-      if (thumbXElem) {
-        thumbXElem.style.width = xThumbWidth + 'px';
-      }
-      reactData.xThumbWidth = xThumbWidth;
-      var trackYEl = $xeScrollbar.$refs.refTrackYElem;
-      var yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
-      var thumbYElem = $xeScrollbar.$refs.refThumbYElem;
-      if (thumbYElem) {
-        thumbYElem.style.height = yThumbHeight + 'px';
-      }
-      reactData.yThumbHeight = yThumbHeight;
-    },
-    updateThumbOffset: function updateThumbOffset() {
-      var $xeScrollbar = this;
-      var reactData = $xeScrollbar.reactData;
-      var internalData = $xeScrollbar.internalData;
-      var viewEl = $xeScrollbar.$refs.refViewElem;
-      if (!viewEl) {
-        return;
-        // removed by dead control flow
-
-      }
-      var xThumbWidth = reactData.xThumbWidth,
-        yThumbHeight = reactData.yThumbHeight;
-      var trackXEl = $xeScrollbar.$refs.refTrackXElem;
-      var thumbXElem = $xeScrollbar.$refs.refThumbXElem;
-      var xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
-      internalData.xThumbLeft = xThumbLeft;
-      if (thumbXElem && xThumbWidth) {
-        thumbXElem.style.width = xThumbWidth + 'px';
-        thumbXElem.style.transform = "translateX(".concat(xThumbLeft, "px)");
-      }
-      var trackYEl = $xeScrollbar.$refs.refTrackYElem;
-      var thumbYElem = $xeScrollbar.$refs.refThumbYElem;
-      var yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
-      internalData.yThumbTop = yThumbTop;
-      if (thumbYElem && yThumbHeight) {
-        thumbYElem.style.height = yThumbHeight + 'px';
-        thumbYElem.style.transform = "translateY(".concat(yThumbTop, "px)");
-      }
-    },
     scrollEvent: function scrollEvent(evnt) {
       var $xeScrollbar = this;
       var reactData = $xeScrollbar.reactData;
@@ -17312,125 +17503,6 @@ function createInternalData() {
         scrollWidth: scrollWidth
       }, evnt);
     },
-    clickTrackXEvent: function clickTrackXEvent(evnt) {
-      var $xeScrollbar = this;
-      var reactData = $xeScrollbar.reactData;
-      var trackEl = evnt.currentTarget;
-      if (trackEl !== evnt.target) {
-        return;
-      }
-      var viewEl = $xeScrollbar.$refs.refViewElem;
-      if (!viewEl) {
-        return;
-      }
-      var xThumbWidth = reactData.xThumbWidth;
-      var trackRect = trackEl.getBoundingClientRect();
-      viewEl.scrollTo({
-        left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
-        behavior: 'auto'
-      });
-    },
-    clickTrackYEvent: function clickTrackYEvent(evnt) {
-      var $xeScrollbar = this;
-      var reactData = $xeScrollbar.reactData;
-      var trackEl = evnt.currentTarget;
-      if (trackEl !== evnt.target) {
-        return;
-      }
-      var viewEl = $xeScrollbar.$refs.refViewElem;
-      if (!viewEl) {
-        return;
-      }
-      var yThumbHeight = reactData.yThumbHeight;
-      var trackRect = trackEl.getBoundingClientRect();
-      viewEl.scrollTo({
-        top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
-        behavior: 'auto'
-      });
-    },
-    pointerdownThumbXEvent: function pointerdownThumbXEvent(evnt) {
-      var $xeScrollbar = this;
-      var reactData = $xeScrollbar.reactData;
-      var internalData = $xeScrollbar.internalData;
-      var thumbEl = evnt.currentTarget;
-      internalData.isThumbDrag = true;
-      thumbEl.setPointerCapture(evnt.pointerId);
-      var viewEl = $xeScrollbar.$refs.refViewElem;
-      if (!viewEl) {
-        return;
-      }
-      var xThumbWidth = reactData.xThumbWidth;
-      var trackEl = thumbEl.parentElement;
-      var trackRect = trackEl.getBoundingClientRect();
-      var pointerPosition = evnt.clientX - trackRect.left;
-      // 记录 thumb 的偏移
-      var thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-      internalData.thumbDragOffset = pointerPosition - thumbOffset;
-    },
-    pointermoveThumbXEvent: function pointermoveThumbXEvent(evnt) {
-      var $xeScrollbar = this;
-      var reactData = $xeScrollbar.reactData;
-      var internalData = $xeScrollbar.internalData;
-      var isThumbDrag = internalData.isThumbDrag,
-        thumbDragOffset = internalData.thumbDragOffset;
-      if (isThumbDrag) {
-        var viewEl = $xeScrollbar.$refs.refViewElem;
-        if (!viewEl) {
-          return;
-        }
-        var xThumbWidth = reactData.xThumbWidth;
-        var thumbEl = evnt.currentTarget;
-        var trackEl = thumbEl.parentElement;
-        var trackRect = trackEl.getBoundingClientRect();
-        // 更新偏移
-        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-      }
-    },
-    cleatPointerThumbEvent: function cleatPointerThumbEvent(evnt) {
-      var $xeScrollbar = this;
-      var internalData = $xeScrollbar.internalData;
-      var thumbEl = evnt.currentTarget;
-      thumbEl.releasePointerCapture(evnt.pointerId);
-      internalData.isThumbDrag = false;
-    },
-    pointerdownThumbYEvent: function pointerdownThumbYEvent(evnt) {
-      var $xeScrollbar = this;
-      var reactData = $xeScrollbar.reactData;
-      var internalData = $xeScrollbar.internalData;
-      var thumbEl = evnt.currentTarget;
-      internalData.isThumbDrag = true;
-      thumbEl.setPointerCapture(evnt.pointerId);
-      var viewEl = $xeScrollbar.$refs.refViewElem;
-      if (!viewEl) {
-        return;
-      }
-      var yThumbHeight = reactData.yThumbHeight;
-      var trackEl = thumbEl.parentElement;
-      var trackRect = trackEl.getBoundingClientRect();
-      var pointerPosition = evnt.clientY - trackRect.top;
-      // 记录 thumb 的偏移
-      var thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
-      internalData.thumbDragOffset = pointerPosition - thumbOffset;
-    },
-    pointermoveThumbYEvent: function pointermoveThumbYEvent(evnt) {
-      var $xeScrollbar = this;
-      var reactData = $xeScrollbar.reactData;
-      var internalData = $xeScrollbar.internalData;
-      var isThumbDrag = internalData.isThumbDrag,
-        thumbDragOffset = internalData.thumbDragOffset;
-      if (isThumbDrag) {
-        var viewEl = $xeScrollbar.$refs.refViewElem;
-        if (!viewEl) {
-          return;
-        }
-        var yThumbHeight = reactData.yThumbHeight;
-        var thumbEl = evnt.currentTarget;
-        var trackEl = thumbEl.parentElement;
-        var trackRect = trackEl.getBoundingClientRect();
-        // 更新偏移
-        viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
-      }
-    },
     //
     // Render
     //
@@ -17584,18 +17656,18 @@ function createInternalData() {
     var viewEl = $xeScrollbar.$refs.refViewElem;
     var viewInnerEl = $xeScrollbar.$refs.refViewInnerElem;
     if (autoResize) {
-      var resizeObserver = scrollbar_globalResize.create(function () {
+      var scrollObserver = scrollbar_globalResize.create(function () {
         if (props.autoResize) {
           $xeScrollbar.reFlag++;
         }
       });
       if (viewEl) {
-        resizeObserver.observe(viewEl);
+        scrollObserver.observe(viewEl);
       }
       if (viewInnerEl) {
-        resizeObserver.observe(viewInnerEl);
+        scrollObserver.observe(viewInnerEl);
       }
-      internalData.resizeObserver = resizeObserver;
+      internalData.scrollObserver = scrollObserver;
     }
     $xeScrollbar.reFlag++;
     scrollbar_globalEvents.on($xeScrollbar, 'resize', function () {
@@ -17605,9 +17677,9 @@ function createInternalData() {
   beforeDestroy: function beforeDestroy() {
     var $xeScrollbar = this;
     var internalData = $xeScrollbar.internalData;
-    var resizeObserver = internalData.resizeObserver;
-    if (resizeObserver) {
-      resizeObserver.disconnect();
+    var scrollObserver = internalData.scrollObserver;
+    if (scrollObserver) {
+      scrollObserver.disconnect();
     }
     scrollbar_globalEvents.off($xeScrollbar, 'resize');
   },
@@ -17682,7 +17754,7 @@ function tooltip_createInternalData() {
 }
 /* harmony default export */ var tooltip = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeTooltip',
-  mixins: [globalMixins.sizeMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin],
   props: {
     value: Boolean,
     size: {
@@ -17966,8 +18038,7 @@ function tooltip_createInternalData() {
     },
     updatePlacement: function updatePlacement() {
       var $xeTooltip = this;
-      $xeTooltip.updateTipStyle();
-      return $xeTooltip.$nextTick().then(function () {
+      return $xeTooltip.updateTipStyle().then(function () {
         return $xeTooltip.updateTipStyle();
       }).then(function () {
         return $xeTooltip.updateTipStyle();
@@ -18173,9 +18244,9 @@ function tooltip_createInternalData() {
       var reactData = $xeTooltip.reactData;
       var useHtml = props.useHtml,
         theme = props.theme,
-        useScrollbar = props.useScrollbar,
         useHTML = props.useHTML;
       var tipContent = reactData.tipContent;
+      var isVScrollbar = $xeTooltip.computeIsVScrollbar;
       var wrapperStyle = $xeTooltip.computeWrapperStyle;
       var contentSlot = slots.content;
       var contVNs = [];
@@ -18195,7 +18266,7 @@ function tooltip_createInternalData() {
           key: 'cd'
         }, "".concat(tipContent)));
       }
-      if (useScrollbar) {
+      if (isVScrollbar) {
         return h(packages_scrollbar, {
           key: 5,
           ref: 'contentScrollbar',
@@ -18295,7 +18366,7 @@ function tooltip_createInternalData() {
     var internalData = $xeTooltip.internalData;
     var $scrollbar = $xeTooltip.$refs.contentScrollbar;
     if ($scrollbar) {
-      var viewEl = $scrollbar.getViewElem();
+      var viewEl = $scrollbar.getScrollViewElem();
       if (viewEl) {
         viewEl.addEventListener('wheel', $xeTooltip.wheelEvent, {
           passive: false
@@ -22049,7 +22120,7 @@ var Calendar = VxeCalendar;
 
 /* harmony default export */ var card = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeCard',
-  mixins: [globalMixins.sizeMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin],
   props: {
     title: String,
     showTitleOverflow: {
@@ -23060,14 +23131,9 @@ var list_getConfig = VxeUI.getConfig,
   list_getIcon = VxeUI.getIcon,
   list_getI18n = VxeUI.getI18n,
   list_domUtils = VxeUI.domUtils,
-  list_scrollbarUtils = VxeUI.scrollbarUtils,
   list_menus = VxeUI.menus,
   list_globalEvents = VxeUI.globalEvents,
   list_globalResize = VxeUI.globalResize;
-var list_getThumbOffsetSize = list_scrollbarUtils.getThumbOffsetSize,
-  list_getThumbSize = list_scrollbarUtils.getThumbSize,
-  list_getScrollFromClick = list_scrollbarUtils.getScrollFromClick,
-  list_getScrollFromDrag = list_scrollbarUtils.getScrollFromDrag;
 var list_createComponentLog = createComponentLog('tree'),
   list_warnLog = list_createComponentLog.warnLog,
   list_errLog = list_createComponentLog.errLog;
@@ -23143,7 +23209,7 @@ function list_createInternalData() {
 }
 /* harmony default export */ var list = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeList',
-  mixins: [globalMixins.sizeMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin, globalMixins.initVScrollbarMixin],
   props: {
     data: Array,
     height: [Number, String],
@@ -23205,7 +23271,8 @@ function list_createInternalData() {
       xID: xID,
       reactData: reactData,
       crossListDragRowInfo: crossListDragRowGlobal,
-      reFlag: 0
+      reLayoutFlag: 0,
+      reScrollFlag: 0
     });
   },
   computed: _objectSpread2(_objectSpread2({}, {}), {}, {
@@ -23403,6 +23470,11 @@ function list_createInternalData() {
       }
       return [];
     },
+    getScrollViewElem: function getScrollViewElem() {
+      var $xeList = this;
+      var viewEl = $xeList.$refs.refVirtualWrapper;
+      return viewEl || null;
+    },
     getRowId: function getRowId(row) {
       var $xeList = this;
       var keyField = $xeList.computeKeyField;
@@ -23715,8 +23787,14 @@ function list_createInternalData() {
     },
     updateScrollbar: function updateScrollbar() {
       var $xeList = this;
-      $xeList.updateThumbSize();
-      $xeList.updateThumbOffset();
+      var isVScrollbar = $xeList.computeIsVScrollbar;
+      if (isVScrollbar) {
+        return $xeList.$nextTick().then(function () {
+          $xeList.updateThumbSize();
+          $xeList.updateThumbOffset();
+        });
+      }
+      return Promise.resolve();
     },
     /**
      * 重新计算列表
@@ -23737,10 +23815,11 @@ function list_createInternalData() {
           parentHeight = parentEl.clientHeight - Math.ceil(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(parentStyle.paddingLeft) + external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(parentStyle.paddingRight));
         }
         reactData.parentHeight = parentHeight;
-        $xeList.updateScrollbar();
         $xeList.updateHeight();
         if (el.clientWidth && el.clientHeight) {
-          return $xeList.computeScrollLoad();
+          return $xeList.computeScrollLoad().then(function () {
+            $xeList.updateScrollbar();
+          });
         }
       }
       return $xeList.$nextTick();
@@ -23754,7 +23833,7 @@ function list_createInternalData() {
         visibleSize = scrollYStore.visibleSize,
         offsetSize = scrollYStore.offsetSize,
         rowHeight = scrollYStore.rowHeight;
-      var scrollBodyElem = evnt.target;
+      var scrollBodyElem = evnt.currentTarget;
       var scrollTop = scrollBodyElem.scrollTop;
       var toVisibleIndex = Math.floor(scrollTop / rowHeight);
       var offsetStartIndex = Math.max(0, toVisibleIndex - 1 - offsetSize);
@@ -23771,7 +23850,7 @@ function list_createInternalData() {
       var $xeList = this;
       var reactData = $xeList.reactData;
       var internalData = $xeList.internalData;
-      var scrollBodyElem = evnt.target;
+      var scrollBodyElem = evnt.currentTarget;
       var scrollTop = scrollBodyElem.scrollTop;
       var scrollLeft = scrollBodyElem.scrollLeft;
       var isX = scrollLeft !== internalData.lastScrollLeft;
@@ -25137,186 +25216,26 @@ function list_createInternalData() {
       }, evnt);
     },
     // 滚动条
-    updateThumbSize: function updateThumbSize() {
-      var $xeList = this;
-      var reactData = $xeList.reactData;
-      var viewEl = $xeList.$refs.refVirtualWrapper;
-      if (!viewEl) {
-        return;
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return;
-      }
-      var trackXEl = $xeList.$refs.refTrackXElem;
-      var xThumbWidth = trackXEl ? list_getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
-      var thumbXElem = $xeList.$refs.refThumbXElem;
-      if (thumbXElem) {
-        thumbXElem.style.width = xThumbWidth + 'px';
-      }
-      reactData.xThumbWidth = xThumbWidth;
-      var trackYEl = $xeList.$refs.refTrackYElem;
-      var yThumbHeight = trackYEl ? list_getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
-      var thumbYElem = $xeList.$refs.refThumbYElem;
-      if (thumbYElem) {
-        thumbYElem.style.height = yThumbHeight + 'px';
-      }
-      reactData.yThumbHeight = yThumbHeight;
-    },
-    updateThumbOffset: function updateThumbOffset() {
-      var $xeList = this;
-      var reactData = $xeList.reactData;
-      var internalData = $xeList.internalData;
-      var viewEl = $xeList.$refs.refVirtualWrapper;
-      if (!viewEl) {
-        return;
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return;
-      }
-      var xThumbWidth = reactData.xThumbWidth,
-        yThumbHeight = reactData.yThumbHeight;
-      var trackXEl = $xeList.$refs.refTrackXElem;
-      var thumbXElem = $xeList.$refs.refThumbXElem;
-      var xThumbLeft = trackXEl && xThumbWidth ? list_getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
-      internalData.xThumbLeft = xThumbLeft;
-      if (thumbXElem && xThumbWidth) {
-        thumbXElem.style.width = xThumbWidth + 'px';
-        thumbXElem.style.transform = "translateX(".concat(xThumbLeft, "px)");
-      }
-      var trackYEl = $xeList.$refs.refTrackYElem;
-      var thumbYElem = $xeList.$refs.refThumbYElem;
-      var yThumbTop = trackYEl && yThumbHeight ? list_getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
-      internalData.yThumbTop = yThumbTop;
-      if (thumbYElem && yThumbHeight) {
-        thumbYElem.style.height = yThumbHeight + 'px';
-        thumbYElem.style.transform = "translateY(".concat(yThumbTop, "px)");
-      }
-    },
-    clickTrackXEvent: function clickTrackXEvent(evnt) {
-      var $xeList = this;
-      var reactData = $xeList.reactData;
-      var trackEl = evnt.currentTarget;
-      if (trackEl !== evnt.target) {
-        return;
-      }
-      var viewEl = $xeList.$refs.refVirtualWrapper;
-      if (!viewEl) {
-        return;
-      }
-      var xThumbWidth = reactData.xThumbWidth;
-      var trackRect = trackEl.getBoundingClientRect();
-      viewEl.scrollTo({
-        left: list_getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
-        behavior: 'auto'
-      });
-    },
-    clickTrackYEvent: function clickTrackYEvent(evnt) {
-      var $xeList = this;
-      var reactData = $xeList.reactData;
-      var trackEl = evnt.currentTarget;
-      if (trackEl !== evnt.target) {
-        return;
-      }
-      var viewEl = $xeList.$refs.refVirtualWrapper;
-      if (!viewEl) {
-        return;
-      }
-      var yThumbHeight = reactData.yThumbHeight;
-      var trackRect = trackEl.getBoundingClientRect();
-      viewEl.scrollTo({
-        top: list_getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
-        behavior: 'auto'
-      });
-    },
-    pointerdownThumbXEvent: function pointerdownThumbXEvent(evnt) {
-      var $xeList = this;
-      var reactData = $xeList.reactData;
-      var internalData = $xeList.internalData;
-      var thumbEl = evnt.currentTarget;
-      internalData.isThumbDrag = true;
-      thumbEl.setPointerCapture(evnt.pointerId);
-      var viewEl = $xeList.$refs.refVirtualWrapper;
-      if (!viewEl) {
-        return;
-      }
-      var xThumbWidth = reactData.xThumbWidth;
-      var trackEl = thumbEl.parentElement;
-      var trackRect = trackEl.getBoundingClientRect();
-      var pointerPosition = evnt.clientX - trackRect.left;
-      // 记录 thumb 的偏移
-      var thumbOffset = list_getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-      internalData.thumbDragOffset = pointerPosition - thumbOffset;
-    },
-    pointermoveThumbXEvent: function pointermoveThumbXEvent(evnt) {
-      var $xeList = this;
-      var reactData = $xeList.reactData;
-      var internalData = $xeList.internalData;
-      var thumbEl = evnt.currentTarget;
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return;
-      }
-      var isThumbDrag = internalData.isThumbDrag,
-        thumbDragOffset = internalData.thumbDragOffset;
-      if (isThumbDrag) {
-        var viewEl = $xeList.$refs.refVirtualWrapper;
-        if (!viewEl) {
-          return;
-        }
-        var xThumbWidth = reactData.xThumbWidth;
-        var _thumbEl = evnt.currentTarget;
-        var trackEl = _thumbEl.parentElement;
-        var trackRect = trackEl.getBoundingClientRect();
-        // 更新偏移
-        viewEl.scrollLeft = list_getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-      }
-    },
-    cleatPointerThumbEvent: function cleatPointerThumbEvent(evnt) {
-      var $xeList = this;
-      var internalData = $xeList.internalData;
-      var thumbEl = evnt.currentTarget;
-      thumbEl.releasePointerCapture(evnt.pointerId);
-      internalData.isThumbDrag = false;
-    },
-    pointerdownThumbYEvent: function pointerdownThumbYEvent(evnt) {
-      var $xeList = this;
-      var reactData = $xeList.reactData;
-      var internalData = $xeList.internalData;
-      var thumbEl = evnt.currentTarget;
-      internalData.isThumbDrag = true;
-      thumbEl.setPointerCapture(evnt.pointerId);
-      var viewEl = $xeList.$refs.refVirtualWrapper;
-      if (!viewEl) {
-        return;
-      }
-      var yThumbHeight = reactData.yThumbHeight;
-      var trackEl = thumbEl.parentElement;
-      var trackRect = trackEl.getBoundingClientRect();
-      var pointerPosition = evnt.clientY - trackRect.top;
-      // 记录 thumb 的偏移
-      var thumbOffset = list_getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
-      internalData.thumbDragOffset = pointerPosition - thumbOffset;
-    },
-    pointermoveThumbYEvent: function pointermoveThumbYEvent(evnt) {
+    bindScrollbarResize: function bindScrollbarResize() {
       var $xeList = this;
-      var reactData = $xeList.reactData;
       var internalData = $xeList.internalData;
-      var thumbEl = evnt.currentTarget;
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return;
-      }
-      var isThumbDrag = internalData.isThumbDrag,
-        thumbDragOffset = internalData.thumbDragOffset;
-      if (isThumbDrag) {
-        var viewEl = $xeList.$refs.refVirtualWrapper;
-        if (!viewEl) {
-          return;
+      var scrollObserver = internalData.scrollObserver;
+      var isVScrollbar = $xeList.computeIsVScrollbar;
+      if (isVScrollbar) {
+        if (!scrollObserver) {
+          var el = $xeList.$refs.refElem;
+          var viewInnerEl = $xeList.$refs.refVirtualSpaceElem;
+          var _scrollObserver = list_globalResize.create(function () {
+            $xeList.reScrollFlag++;
+          });
+          if (el) {
+            _scrollObserver.observe(el);
+          }
+          if (viewInnerEl) {
+            _scrollObserver.observe(viewInnerEl);
+          }
+          internalData.scrollObserver = _scrollObserver;
         }
-        var yThumbHeight = reactData.yThumbHeight;
-        var _thumbEl2 = evnt.currentTarget;
-        var trackEl = _thumbEl2.parentElement;
-        var trackRect = trackEl.getBoundingClientRect();
-        // 更新偏移
-        viewEl.scrollTop = list_getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
       }
     },
     //
@@ -25555,8 +25474,7 @@ function list_createInternalData() {
       var slots = $xeList.$scopedSlots;
       var showCheckbox = props.showCheckbox,
         className = props.className,
-        loading = props.loading,
-        useScrollbar = props.useScrollbar;
+        loading = props.loading;
       var bodyHeight = reactData.bodyHeight,
         topSpaceHeight = reactData.topSpaceHeight,
         rowList = reactData.rowList,
@@ -25568,6 +25486,7 @@ function list_createInternalData() {
       var headerSlot = slots.header;
       var footerSlot = slots.footer;
       var vSize = $xeList.computeSize;
+      var isVScrollbar = $xeList.computeIsVScrollbar;
       var wrapperStyles = $xeList.computeWrapperStyles;
       var virtualStyles = $xeList.computeVirtualStyles;
       var radioOpts = $xeList.computeRadioOpts;
@@ -25594,9 +25513,9 @@ function list_createInternalData() {
       }
       return h('div', {
         ref: 'refElem',
-        class: ['vxe-list', useScrollbar ? "ov-x--".concat(scrollXVisible === false ? 'hidden' : 'visible') : '', useScrollbar ? "ov-y--".concat(scrollYVisible === false ? 'hidden' : 'visible') : '', useScrollbar ? "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom') : '', useScrollbar ? "sy-pos--".concat(scrollbarYToLeft ? 'left' : 'right') : '', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
+        class: ['vxe-list', isVScrollbar ? "ov-x--".concat(scrollXVisible === false ? 'hidden' : 'visible') : '', isVScrollbar ? "ov-y--".concat(scrollYVisible === false ? 'hidden' : 'visible') : '', isVScrollbar ? "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom') : '', isVScrollbar ? "sy-pos--".concat(scrollbarYToLeft ? 'left' : 'right') : '', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
           $list: $xeList
-        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--virtual-scrollbar', useScrollbar), 'ov-padding', useScrollbar && scrollbarOpts.padding), 'ov-x--auto-hide', useScrollbar && scrollXAutoHide), 'ov-y--auto-hide', useScrollbar && scrollYAutoHide), 'overflow-y', yThumbHeight), 'overflow-x', xThumbWidth), 'is--drag', isDrag), 'is--loading', loading)],
+        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--virtual-scrollbar', isVScrollbar), 'ov-padding', isVScrollbar && scrollbarOpts.padding), 'ov-x--auto-hide', isVScrollbar && scrollXAutoHide), 'ov-y--auto-hide', isVScrollbar && scrollYAutoHide), 'overflow-y', yThumbHeight), 'overflow-x', xThumbWidth), 'is--drag', isDrag), 'is--loading', loading)],
         on: leOns,
         style: wrapperStyles
       }, [headerSlot || showDefChekboxHead ? h('div', {
@@ -25627,6 +25546,7 @@ function list_createInternalData() {
           scroll: $xeList.scrollEvent
         }
       }, [h('div', {
+        ref: 'refVirtualSpaceElem',
         class: 'vxe-list--y-space',
         style: {
           height: bodyHeight ? "".concat(bodyHeight, "px") : ''
@@ -25658,7 +25578,7 @@ function list_createInternalData() {
       /**
        * 滚动条
        */
-      useScrollbar ? h('div', {
+      isVScrollbar ? h('div', {
         class: scrollbarWrapperClss
       }, [scrollXVisible === false ? renderEmptyElement($xeList) : h('div', {
         ref: 'refTrackXElem',
@@ -25716,50 +25636,61 @@ function list_createInternalData() {
     },
     height: function height() {
       var $xeList = this;
-      $xeList.reFlag++;
+      $xeList.reLayoutFlag++;
     },
     maxHeight: function maxHeight() {
       var $xeList = this;
-      $xeList.reFlag++;
+      $xeList.reLayoutFlag++;
     },
     syncResize: function syncResize() {
       var $xeList = this;
-      $xeList.reFlag++;
+      $xeList.reLayoutFlag++;
     },
-    useScrollbar: function useScrollbar() {
+    computeIsVScrollbar: function computeIsVScrollbar() {
       var $xeList = this;
-      $xeList.reFlag++;
+      $xeList.$nextTick(function () {
+        $xeList.bindScrollbarResize();
+        $xeList.$nextTick(function () {
+          $xeList.reLayoutFlag++;
+        });
+      });
     },
     computeRowHeight: function computeRowHeight() {
       var $xeList = this;
-      $xeList.reFlag++;
+      $xeList.reLayoutFlag++;
     },
     computeScrollYWidth: function computeScrollYWidth() {
       var $xeList = this;
-      $xeList.reFlag++;
+      $xeList.reLayoutFlag++;
     },
     computeScrollXHeight: function computeScrollXHeight() {
       var $xeList = this;
-      $xeList.reFlag++;
+      $xeList.reLayoutFlag++;
     },
     computeScrollXVisible: function computeScrollXVisible() {
       var $xeList = this;
       $xeList.$nextTick(function () {
-        $xeList.reFlag++;
+        $xeList.reLayoutFlag++;
       });
     },
     computeScrollYVisible: function computeScrollYVisible() {
       var $xeList = this;
       $xeList.$nextTick(function () {
-        $xeList.reFlag++;
+        $xeList.reLayoutFlag++;
       });
     },
-    reFlag: function reFlag() {
+    reLayoutFlag: function reLayoutFlag() {
       var $xeList = this;
       $xeList.recalculate().then(function () {
         $xeList.recalculate();
       });
     },
+    reScrollFlag: function reScrollFlag() {
+      var $xeList = this;
+      $xeList.updateScrollbar().then(function () {
+        $xeList.updateScrollbar();
+      });
+    },
     checkRowKey: function checkRowKey() {
       var $xeList = this;
       $xeList.updateRadioModeValue();
@@ -25783,8 +25714,7 @@ function list_createInternalData() {
     var showSeq = props.showSeq,
       showRadio = props.showRadio,
       showCheckbox = props.showCheckbox,
-      autoResize = props.autoResize,
-      useScrollbar = props.useScrollbar;
+      autoResize = props.autoResize;
     var rowOpts = $xeList.computeRowOpts;
     var useKey = rowOpts.useKey,
       keyField = rowOpts.keyField;
@@ -25806,25 +25736,12 @@ function list_createInternalData() {
     if (useKey && !keyField) {
       list_errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
     }
-    var el = $xeList.$refs.refElem;
-    if (useScrollbar) {
-      var viewInnerEl = $xeList.$refs.refVirtualBody;
-      var scrollObserver = list_globalResize.create(function () {
-        $xeList.reFlag++;
-      });
-      if (el) {
-        scrollObserver.observe(el);
-      }
-      if (viewInnerEl) {
-        scrollObserver.observe(viewInnerEl);
-      }
-      internalData.scrollObserver = scrollObserver;
-    }
     if (autoResize) {
+      var el = $xeList.$refs.refElem;
       var parentEl = $xeList.getParentElem();
       var resizeObserver = list_globalResize.create(function () {
         if (props.autoResize) {
-          $xeList.reFlag++;
+          $xeList.reLayoutFlag++;
         }
       });
       if (el) {
@@ -25835,9 +25752,10 @@ function list_createInternalData() {
       }
       internalData.resizeObserver = resizeObserver;
     }
-    $xeList.reFlag++;
+    $xeList.reLayoutFlag++;
+    $xeList.bindScrollbarResize();
     list_globalEvents.on($xeList, 'resize', function () {
-      $xeList.reFlag++;
+      $xeList.reLayoutFlag++;
     });
   },
   activated: function activated() {
@@ -37219,6 +37137,7 @@ var es_array_sort = __webpack_require__(6910);
 
 
 
+
 
 
 var date_panel_createComponentLog = createComponentLog('date-panel'),
@@ -39200,52 +39119,82 @@ var date_panel_createComponentLog = createComponentLog('date-panel'),
       }, dateTimeLabel)]), h('div', {
         ref: 'refInputTimeBody',
         class: 'vxe-date-panel--time-body'
-      }, [h('ul', {
-        class: 'vxe-date-panel--time-hour-list'
-      }, hourList.map(function (item, index) {
-        return h('li', {
-          key: index,
-          class: {
-            'is--disabled': item.disabled,
-            'is--selected': datetimePanelValue && datetimePanelValue.getHours() === item.value
-          },
-          on: {
-            click: function click(evnt) {
-              return $xeDatePanel.dateHourEvent(evnt, item);
-            }
+      }, [h(packages_scrollbar, {
+        class: 'vxe-date-panel--time-hour-list',
+        props: {
+          autoHide: true,
+          viewClassName: 'vxe-date-panel--time-list-view',
+          viewInnerClassName: 'vxe-date-panel--time-list-inner'
+        },
+        scopedSlots: {
+          default: function _default() {
+            return hourList.map(function (item, index) {
+              return h('div', {
+                key: index,
+                class: ['vxe-date-panel--time-item', {
+                  'is--disabled': item.disabled,
+                  'is--selected': datetimePanelValue && datetimePanelValue.getHours() === item.value
+                }],
+                on: {
+                  click: function click(evnt) {
+                    return $xeDatePanel.dateHourEvent(evnt, item);
+                  }
+                }
+              }, item.label);
+            });
           }
-        }, item.label);
-      })), hasTimeMinute ? h('ul', {
-        class: 'vxe-date-panel--time-minute-list'
-      }, minuteList.map(function (item, index) {
-        return h('li', {
-          key: index,
-          class: {
-            'is--disabled': item.disabled,
-            'is--selected': datetimePanelValue && datetimePanelValue.getMinutes() === item.value
-          },
-          on: {
-            click: function click(evnt) {
-              return $xeDatePanel.dateMinuteEvent(evnt, item);
-            }
+        }
+      }), hasTimeMinute ? h(packages_scrollbar, {
+        class: 'vxe-date-panel--time-minute-list',
+        props: {
+          autoHide: true,
+          viewClassName: 'vxe-date-panel--time-list-view',
+          viewInnerClassName: 'vxe-date-panel--time-list-inner'
+        },
+        scopedSlots: {
+          default: function _default() {
+            return minuteList.map(function (item, index) {
+              return h('div', {
+                key: index,
+                class: ['vxe-date-panel--time-item', {
+                  'is--disabled': item.disabled,
+                  'is--selected': datetimePanelValue && datetimePanelValue.getMinutes() === item.value
+                }],
+                on: {
+                  click: function click(evnt) {
+                    return $xeDatePanel.dateMinuteEvent(evnt, item);
+                  }
+                }
+              }, item.label);
+            });
           }
-        }, item.label);
-      })) : renderEmptyElement($xeDatePanel), hasTimeMinute && hasTimeSecond ? h('ul', {
-        class: 'vxe-date-panel--time-second-list'
-      }, secondList.map(function (item, index) {
-        return h('li', {
-          key: index,
-          class: {
-            'is--disabled': item.disabled,
-            'is--selected': datetimePanelValue && datetimePanelValue.getSeconds() === item.value
-          },
-          on: {
-            click: function click(evnt) {
-              return $xeDatePanel.dateSecondEvent(evnt, item);
-            }
+        }
+      }) : renderEmptyElement($xeDatePanel), hasTimeMinute && hasTimeSecond ? h(packages_scrollbar, {
+        class: 'vxe-date-panel--time-second-list',
+        props: {
+          autoHide: true,
+          viewClassName: 'vxe-date-panel--time-list-view',
+          viewInnerClassName: 'vxe-date-panel--time-list-inner'
+        },
+        scopedSlots: {
+          default: function _default() {
+            return secondList.map(function (item, index) {
+              return h('div', {
+                key: index,
+                class: ['vxe-date-panel--time-item', {
+                  'is--disabled': item.disabled,
+                  'is--selected': datetimePanelValue && datetimePanelValue.getSeconds() === item.value
+                }],
+                on: {
+                  click: function click(evnt) {
+                    return $xeDatePanel.dateSecondEvent(evnt, item);
+                  }
+                }
+              }, item.label);
+            });
           }
-        }, item.label);
-      })) : renderEmptyElement($xeDatePanel)])];
+        }
+      }) : renderEmptyElement($xeDatePanel)])];
     },
     renderPickerPanel: function renderPickerPanel(h) {
       var $xeDatePanel = this;
@@ -43178,7 +43127,7 @@ var allActiveDrawers = [];
 
 /* harmony default export */ var drawer = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeDrawer',
-  mixins: [globalMixins.sizeMixin, globalMixins.permissionMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin, globalMixins.permissionMixin],
   props: {
     value: Boolean,
     id: String,
@@ -47282,6 +47231,17 @@ var FormItem = VxeFormItem;
 
 
 
+var icon_picker_getConfig = VxeUI.getConfig,
+  icon_picker_getIcon = VxeUI.getIcon,
+  icon_picker_getI18n = VxeUI.getI18n,
+  icon_picker_baseUtils = VxeUI.baseUtils,
+  icon_picker_globalEvents = VxeUI.globalEvents,
+  icon_picker_createEvent = VxeUI.createEvent,
+  icon_picker_renderer = VxeUI.renderer,
+  icon_picker_globalMixins = VxeUI.globalMixins,
+  icon_picker_GLOBAL_EVENT_KEYS = VxeUI.GLOBAL_EVENT_KEYS,
+  icon_picker_renderEmptyElement = VxeUI.renderEmptyElement;
+var icon_picker_getDefVal = icon_picker_baseUtils.getDefVal;
 function icon_picker_createReactData() {
   return {
     initialized: false,
@@ -47304,7 +47264,7 @@ function icon_picker_createInternalData() {
 }
 /* harmony default export */ var icon_picker = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeIconPicker',
-  mixins: [globalMixins.sizeMixin],
+  mixins: [icon_picker_globalMixins.sizeMixin, icon_picker_globalMixins.vScrollbarMixin],
   model: {
     prop: 'value',
     event: 'modelValue'
@@ -47316,7 +47276,7 @@ function icon_picker_createInternalData() {
     size: {
       type: String,
       default: function _default() {
-        return getConfig().iconPicker.size || getConfig().size;
+        return icon_picker_getConfig().iconPicker.size || icon_picker_getConfig().size;
       }
     },
     className: [String, Function],
@@ -47329,7 +47289,7 @@ function icon_picker_createInternalData() {
     showIconTitle: {
       type: Boolean,
       default: function _default() {
-        return getConfig().iconPicker.showIconTitle;
+        return icon_picker_getConfig().iconPicker.showIconTitle;
       }
     },
     readonly: {
@@ -47343,7 +47303,7 @@ function icon_picker_createInternalData() {
     filterable: {
       type: Boolean,
       default: function _default() {
-        return getConfig().iconPicker.filterable;
+        return icon_picker_getConfig().iconPicker.filterable;
       }
     },
     filterConfig: Object,
@@ -47353,7 +47313,14 @@ function icon_picker_createInternalData() {
     transfer: {
       type: Boolean,
       default: null
-    }
+    },
+    useScrollbar: {
+      type: Boolean,
+      default: function _default() {
+        return icon_picker_getDefVal(icon_picker_getConfig().iconPicker.useScrollbar, icon_picker_getConfig().useScrollbar);
+      }
+    },
+    scrollbarConfig: Object
   },
   inject: {
     $xeModal: {
@@ -47426,7 +47393,7 @@ function icon_picker_createInternalData() {
         return popupOpts.transfer;
       }
       if (transfer === null) {
-        var globalTransfer = getConfig().iconPicker.transfer;
+        var globalTransfer = icon_picker_getConfig().iconPicker.transfer;
         if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(globalTransfer)) {
           return globalTransfer;
         }
@@ -47443,11 +47410,11 @@ function icon_picker_createInternalData() {
       if (placeholder) {
         return getFuncText(placeholder);
       }
-      var globalPlaceholder = getConfig().select.placeholder;
+      var globalPlaceholder = icon_picker_getConfig().select.placeholder;
       if (globalPlaceholder) {
         return getFuncText(globalPlaceholder);
       }
-      return getI18n('vxe.base.pleaseSelect');
+      return icon_picker_getI18n('vxe.base.pleaseSelect');
     },
     computeCurrStyle: function computeCurrStyle() {
       var $xeIconPicker = this;
@@ -47482,7 +47449,7 @@ function icon_picker_createInternalData() {
       var props = $xeIconPicker;
       var icons = props.icons;
       if (!icons || !icons.length) {
-        icons = getConfig().iconPicker.icons || [];
+        icons = icon_picker_getConfig().iconPicker.icons || [];
       }
       return icons.map(function (item) {
         if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(item)) {
@@ -47501,12 +47468,12 @@ function icon_picker_createInternalData() {
     computeFilterOpts: function computeFilterOpts() {
       var $xeIconPicker = this;
       var props = $xeIconPicker;
-      return Object.assign({}, getConfig().iconPicker.filterConfig, props.filterConfig);
+      return Object.assign({}, icon_picker_getConfig().iconPicker.filterConfig, props.filterConfig);
     },
     computePopupOpts: function computePopupOpts() {
       var $xeIconPicker = this;
       var props = $xeIconPicker;
-      return Object.assign({}, getConfig().iconPicker.popupConfig, props.popupConfig);
+      return Object.assign({}, icon_picker_getConfig().iconPicker.popupConfig, props.popupConfig);
     },
     computeIconGroupList: function computeIconGroupList() {
       var $xeIconPicker = this;
@@ -47529,7 +47496,7 @@ function icon_picker_createInternalData() {
     //
     dispatchEvent: function dispatchEvent(type, params, evnt) {
       var $xeIconPicker = this;
-      $xeIconPicker.$emit(type, createEvent(evnt, {
+      $xeIconPicker.$emit(type, icon_picker_createEvent(evnt, {
         $iconPicker: $xeIconPicker
       }, params));
     },
@@ -47793,13 +47760,13 @@ function icon_picker_createInternalData() {
       var visiblePanel = reactData.visiblePanel;
       var isDisabled = $xeIconPicker.computeIsDisabled;
       if (!isDisabled) {
-        var isTab = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.TAB);
-        var isEnter = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ENTER);
-        var isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
-        var isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
-        var isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
-        var isDel = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.DELETE);
-        var isSpacebar = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.SPACEBAR);
+        var isTab = icon_picker_globalEvents.hasKey(evnt, icon_picker_GLOBAL_EVENT_KEYS.TAB);
+        var isEnter = icon_picker_globalEvents.hasKey(evnt, icon_picker_GLOBAL_EVENT_KEYS.ENTER);
+        var isEsc = icon_picker_globalEvents.hasKey(evnt, icon_picker_GLOBAL_EVENT_KEYS.ESCAPE);
+        var isUpArrow = icon_picker_globalEvents.hasKey(evnt, icon_picker_GLOBAL_EVENT_KEYS.ARROW_UP);
+        var isDwArrow = icon_picker_globalEvents.hasKey(evnt, icon_picker_GLOBAL_EVENT_KEYS.ARROW_DOWN);
+        var isDel = icon_picker_globalEvents.hasKey(evnt, icon_picker_GLOBAL_EVENT_KEYS.DELETE);
+        var isSpacebar = icon_picker_globalEvents.hasKey(evnt, icon_picker_GLOBAL_EVENT_KEYS.SPACEBAR);
         if (isTab) {
           reactData.isActivated = false;
         }
@@ -47905,7 +47872,7 @@ function icon_picker_createInternalData() {
       if (!iconList.length) {
         return h('div', {
           class: 'vxe-ico-picker--empty-placeholder'
-        }, getI18n('vxe.iconPicker.emptyText'));
+        }, icon_picker_getI18n('vxe.iconPicker.emptyText'));
       }
       return h('div', {
         class: 'vxe-ico-picker--list-wrapper'
@@ -47913,7 +47880,7 @@ function icon_picker_createInternalData() {
         class: 'vxe-ico-picker--list'
       }, iconList.map(function (item) {
         var iconRender = item.iconRender;
-        var compConf = iconRender ? renderer.get(iconRender.name) : null;
+        var compConf = iconRender ? icon_picker_renderer.get(iconRender.name) : null;
         var iconMethod = compConf ? compConf.renderIconPickerOptionIcon : null;
         return h('div', {
           class: ['vxe-ico-picker--item', {
@@ -47938,7 +47905,7 @@ function icon_picker_createInternalData() {
           class: item.icon || ''
         })]), showIconTitle ? h('div', {
           class: 'vxe-ico-picker--item-title'
-        }, "".concat(item.title || '')) : renderEmptyElement($xeIconPicker)])]);
+        }, "".concat(item.title || '')) : icon_picker_renderEmptyElement($xeIconPicker)])]);
       }))]);
     },
     renderIconView: function renderIconView(h) {
@@ -47948,7 +47915,7 @@ function icon_picker_createInternalData() {
       var selectIconItem = $xeIconPicker.computeSelectIconItem;
       if (selectIconItem) {
         var iconRender = selectIconItem.iconRender;
-        var compConf = iconRender ? renderer.get(iconRender.name) : null;
+        var compConf = iconRender ? icon_picker_renderer.get(iconRender.name) : null;
         var oIconMethod = compConf ? compConf.renderIconPickerOptionIcon : null;
         if (oIconMethod && iconRender) {
           return h('div', {
@@ -48024,11 +47991,11 @@ function icon_picker_createInternalData() {
           click: $xeIconPicker.clearEvent
         }
       }, [h('i', {
-        class: getIcon().INPUT_CLEAR
+        class: icon_picker_getIcon().INPUT_CLEAR
       })]), h('div', {
         class: 'vxe-ico-picker--suffix-icon'
       }, [h('i', {
-        class: visiblePanel ? getIcon().ICON_PICKER_OPEN : getIcon().ICON_PICKER_CLOSE
+        class: visiblePanel ? icon_picker_getIcon().ICON_PICKER_OPEN : icon_picker_getIcon().ICON_PICKER_CLOSE
       })])])]), h('div', {
         ref: 'refOptionPanel',
         class: ['vxe-table--ignore-clear vxe-ico-picker--panel', ppClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(ppClassName) ? ppClassName({
@@ -48052,8 +48019,8 @@ function icon_picker_createInternalData() {
           clearable: true,
           disabled: false,
           readonly: false,
-          placeholder: getI18n('vxe.iconPicker.search'),
-          prefixIcon: getIcon().INPUT_SEARCH
+          placeholder: icon_picker_getI18n('vxe.iconPicker.search'),
+          prefixIcon: icon_picker_getIcon().INPUT_SEARCH
         },
         on: {
           'model-value': $xeIconPicker.modelSearchEvent,
@@ -48061,7 +48028,7 @@ function icon_picker_createInternalData() {
           change: $xeIconPicker.triggerSearchEvent,
           search: $xeIconPicker.triggerSearchEvent
         }
-      })]) : renderEmptyElement($xeIconPicker), $xeIconPicker.renderIconWrapper(h)]) : renderEmptyElement($xeIconPicker)])]);
+      })]) : icon_picker_renderEmptyElement($xeIconPicker), $xeIconPicker.renderIconWrapper(h)]) : icon_picker_renderEmptyElement($xeIconPicker)])]);
     }
   },
   watch: {
@@ -48082,11 +48049,11 @@ function icon_picker_createInternalData() {
     $xeIconPicker.internalData = icon_picker_createInternalData();
     reactData.selectIcon = "".concat(props.value || '');
     $xeIconPicker.handleData();
-    globalEvents.on($xeIconPicker, 'mousedown', $xeIconPicker.handleGlobalMousedownEvent);
-    globalEvents.on($xeIconPicker, 'keydown', $xeIconPicker.handleGlobalKeydownEvent);
-    globalEvents.on($xeIconPicker, 'blur', $xeIconPicker.handleGlobalBlurEvent);
-    globalEvents.on($xeIconPicker, 'resize', $xeIconPicker.handleGlobalResizeEvent);
-    globalEvents.on($xeIconPicker, 'scroll', $xeIconPicker.handleGlobalScrollEvent);
+    icon_picker_globalEvents.on($xeIconPicker, 'mousedown', $xeIconPicker.handleGlobalMousedownEvent);
+    icon_picker_globalEvents.on($xeIconPicker, 'keydown', $xeIconPicker.handleGlobalKeydownEvent);
+    icon_picker_globalEvents.on($xeIconPicker, 'blur', $xeIconPicker.handleGlobalBlurEvent);
+    icon_picker_globalEvents.on($xeIconPicker, 'resize', $xeIconPicker.handleGlobalResizeEvent);
+    icon_picker_globalEvents.on($xeIconPicker, 'scroll', $xeIconPicker.handleGlobalScrollEvent);
   },
   beforeDestroy: function beforeDestroy() {
     var $xeIconPicker = this;
@@ -48096,11 +48063,11 @@ function icon_picker_createInternalData() {
     if (panelElem && panelElem.parentNode) {
       panelElem.parentNode.removeChild(panelElem);
     }
-    globalEvents.off($xeIconPicker, 'mousedown');
-    globalEvents.off($xeIconPicker, 'keydown');
-    globalEvents.off($xeIconPicker, 'blur');
-    globalEvents.off($xeIconPicker, 'resize');
-    globalEvents.off($xeIconPicker, 'scroll');
+    icon_picker_globalEvents.off($xeIconPicker, 'mousedown');
+    icon_picker_globalEvents.off($xeIconPicker, 'keydown');
+    icon_picker_globalEvents.off($xeIconPicker, 'blur');
+    icon_picker_globalEvents.off($xeIconPicker, 'resize');
+    icon_picker_globalEvents.off($xeIconPicker, 'scroll');
     external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(reactData, icon_picker_createReactData());
     external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(internalData, icon_picker_createInternalData());
   },
@@ -49420,7 +49387,7 @@ var ImagePreview = VxeImagePreview;
 
 /* harmony default export */ var layout_aside = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeLayoutAside',
-  mixins: [globalMixins.sizeMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin],
   props: {
     width: [String, Number],
     collapsed: Boolean,
@@ -49586,7 +49553,7 @@ function layout_body_createReactData() {
 }
 /* harmony default export */ var layout_body = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeLayoutBody',
-  mixins: [globalMixins.sizeMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin],
   props: {
     loading: Boolean,
     padding: Boolean,
@@ -49768,15 +49735,25 @@ var LayoutBody = VxeLayoutBody;
 
 
 
+var layout_container_getConfig = VxeUI.getConfig,
+  layout_container_baseUtils = VxeUI.baseUtils,
+  layout_container_createEvent = VxeUI.createEvent;
+var layout_container_getDefVal = layout_container_baseUtils.getDefVal;
 /* harmony default export */ var layout_container = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeLayoutContainer',
-  mixins: [globalMixins.sizeMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin],
   props: {
     vertical: Boolean,
+    useScrollbar: {
+      type: Boolean,
+      default: function _default() {
+        return layout_container_getDefVal(layout_container_getConfig().layoutContainer.useScrollbar, layout_container_getConfig().useScrollbar);
+      }
+    },
     size: {
       type: String,
       default: function _default() {
-        return getConfig().layoutContainer.size || getConfig().size;
+        return layout_container_getConfig().layoutContainer.size || layout_container_getConfig().size;
       }
     }
   },
@@ -49795,7 +49772,7 @@ var LayoutBody = VxeLayoutBody;
     //
     dispatchEvent: function dispatchEvent(type, params, evnt) {
       var $xeLayoutContainer = this;
-      $xeLayoutContainer.$emit(type, createEvent(evnt, {
+      $xeLayoutContainer.$emit(type, layout_container_createEvent(evnt, {
         $layoutContainer: $xeLayoutContainer
       }, params));
     },
@@ -50161,7 +50138,7 @@ function menu_createReactData() {
 var nemuUniqueKey = 100000000;
 /* harmony default export */ var menu = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeMenu',
-  mixins: [globalMixins.sizeMixin, globalMixins.permissionMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin, globalMixins.permissionMixin],
   props: {
     value: [String, Number],
     expandAll: Boolean,
@@ -51119,7 +51096,7 @@ var lockScrollAttrKey = 'data-vxe-lock-scroll';
 var lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
 /* harmony default export */ var modal = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeModal',
-  mixins: [globalMixins.sizeMixin, globalMixins.permissionMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin, globalMixins.permissionMixin],
   props: {
     value: Boolean,
     id: String,
@@ -53637,6 +53614,17 @@ var Option = VxeOption;
 
 
 
+var select_getConfig = VxeUI.getConfig,
+  select_getIcon = VxeUI.getIcon,
+  select_getI18n = VxeUI.getI18n,
+  select_baseUtils = VxeUI.baseUtils,
+  select_domUtils = VxeUI.domUtils,
+  select_globalEvents = VxeUI.globalEvents,
+  select_GLOBAL_EVENT_KEYS = VxeUI.GLOBAL_EVENT_KEYS,
+  select_globalResize = VxeUI.globalResize,
+  select_createEvent = VxeUI.createEvent,
+  select_renderEmptyElement = VxeUI.renderEmptyElement;
+var select_getDefVal = select_baseUtils.getDefVal;
 var select_createComponentLog = createComponentLog('select'),
   select_errLog = select_createComponentLog.errLog;
 function isOptionVisible(option) {
@@ -53657,6 +53645,9 @@ function select_createReactData() {
     currentOption: null,
     searchValue: '',
     searchLoading: false,
+    // 滚动条
+    yThumbHeight: 0,
+    xThumbWidth: 0,
     panelIndex: 0,
     panelStyle: {},
     panelPlacement: null,
@@ -53676,8 +53667,14 @@ function select_createInternalData() {
     optGroupKeyMaps: {},
     optFullValMaps: {},
     remoteValMaps: {},
-    lastScrollLeft: 0,
+    // 滚动条
+    // scrollObserver: undefined,
+    // isThumbDrag: false,
+    thumbDragOffset: 0,
+    yThumbTop: 0,
+    xThumbLeft: 0,
     lastScrollTop: 0,
+    lastScrollLeft: 0,
     scrollYStore: {
       startIndex: 0,
       endIndex: 0,
@@ -53691,7 +53688,7 @@ function select_createInternalData() {
 }
 /* harmony default export */ var src_select = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeSelect',
-  mixins: [globalMixins.sizeMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin, globalMixins.initVScrollbarMixin],
   model: {
     prop: 'value',
     event: 'modelValue'
@@ -53702,13 +53699,13 @@ function select_createInternalData() {
     emptyValue: {
       type: [String, Number, Boolean, Array],
       default: function _default() {
-        return getConfig().select.emptyValue;
+        return select_getConfig().select.emptyValue;
       }
     },
     clearable: {
       type: Boolean,
       default: function _default() {
-        return getConfig().select.clearable;
+        return select_getConfig().select.clearable;
       }
     },
     placeholder: String,
@@ -53725,14 +53722,14 @@ function select_createInternalData() {
     multiCharOverflow: {
       type: [Number, String],
       default: function _default() {
-        return getConfig().select.multiCharOverflow;
+        return select_getConfig().select.multiCharOverflow;
       }
     },
     prefixIcon: String,
     allowCreate: {
       type: Boolean,
       default: function _default() {
-        return getConfig().select.allowCreate;
+        return select_getConfig().select.allowCreate;
       }
     },
     placement: String,
@@ -53756,14 +53753,14 @@ function select_createInternalData() {
     showRadio: {
       type: Boolean,
       default: function _default() {
-        return getConfig().select.showRadio;
+        return select_getConfig().select.showRadio;
       }
     },
     radioConfig: Object,
     showCheckbox: {
       type: Boolean,
       default: function _default() {
-        return getConfig().select.showCheckedButton;
+        return select_getConfig().select.showCheckedButton;
       }
     },
     checkboxConfig: Object,
@@ -53775,7 +53772,7 @@ function select_createInternalData() {
     size: {
       type: String,
       default: function _default() {
-        return getConfig().select.size || getConfig().size;
+        return select_getConfig().select.size || select_getConfig().size;
       }
     },
     filterable: Boolean,
@@ -53791,37 +53788,37 @@ function select_createInternalData() {
     checkedClosable: {
       type: Boolean,
       default: function _default() {
-        return getConfig().select.checkedClosable;
+        return select_getConfig().select.checkedClosable;
       }
     },
     clearClosable: {
       type: Boolean,
       default: function _default() {
-        return getConfig().select.clearClosable;
+        return select_getConfig().select.clearClosable;
       }
     },
     showCloseButton: {
       type: Boolean,
       default: function _default() {
-        return getConfig().select.showCloseButton;
+        return select_getConfig().select.showCloseButton;
       }
     },
     showTotalButton: {
       type: Boolean,
       default: function _default() {
-        return getConfig().select.showTotalButton;
+        return select_getConfig().select.showTotalButton;
       }
     },
     showCheckedButton: {
       type: Boolean,
       default: function _default() {
-        return getConfig().select.showCheckedButton;
+        return select_getConfig().select.showCheckedButton;
       }
     },
     showClearButton: {
       type: Boolean,
       default: function _default() {
-        return getConfig().select.showClearButton;
+        return select_getConfig().select.showClearButton;
       }
     },
     transfer: {
@@ -53831,6 +53828,13 @@ function select_createInternalData() {
     popupConfig: Object,
     virtualYConfig: Object,
     scrollY: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: function _default() {
+        return select_getDefVal(select_getConfig().select.useScrollbar, select_getConfig().useScrollbar);
+      }
+    },
+    scrollbarConfig: Object,
     /**
      * 已废弃，被 remote-config.queryMethod 替换
      * @deprecated
@@ -53843,7 +53847,7 @@ function select_createInternalData() {
     optionId: {
       type: String,
       default: function _default() {
-        return getConfig().select.optionId;
+        return select_getConfig().select.optionId;
       }
     },
     /**
@@ -53881,7 +53885,9 @@ function select_createInternalData() {
     var reactData = select_createReactData();
     return _objectSpread2(_objectSpread2({}, {}), {}, {
       xID: xID,
-      reactData: reactData
+      reactData: reactData,
+      reLayoutFlag: 0,
+      reScrollFlag: 0
     });
   },
   computed: _objectSpread2(_objectSpread2({}, {}), {}, {
@@ -53925,7 +53931,7 @@ function select_createInternalData() {
         return popupOpts.transfer;
       }
       if (transfer === null) {
-        var globalTransfer = getConfig().select.transfer;
+        var globalTransfer = select_getConfig().select.transfer;
         if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(globalTransfer)) {
           return globalTransfer;
         }
@@ -53942,11 +53948,11 @@ function select_createInternalData() {
       if (placeholder) {
         return getFuncText(placeholder);
       }
-      var globalPlaceholder = getConfig().select.placeholder;
+      var globalPlaceholder = select_getConfig().select.placeholder;
       if (globalPlaceholder) {
         return getFuncText(globalPlaceholder);
       }
-      return getI18n('vxe.base.pleaseSelect');
+      return select_getI18n('vxe.base.pleaseSelect');
     },
     computeDefaultOpts: function computeDefaultOpts() {
       var $xeSelect = this;
@@ -53991,37 +53997,37 @@ function select_createInternalData() {
     computePopupOpts: function computePopupOpts() {
       var $xeSelect = this;
       var props = $xeSelect;
-      return Object.assign({}, getConfig().select.popupConfig, props.popupConfig);
+      return Object.assign({}, select_getConfig().select.popupConfig, props.popupConfig);
     },
     computeVirtualYOpts: function computeVirtualYOpts() {
       var $xeSelect = this;
       var props = $xeSelect;
-      return Object.assign({}, getConfig().select.virtualYConfig || getConfig().select.scrollY, props.virtualYConfig || props.scrollY);
+      return Object.assign({}, select_getConfig().select.virtualYConfig || select_getConfig().select.scrollY, props.virtualYConfig || props.scrollY);
     },
     computeRemoteOpts: function computeRemoteOpts() {
       var $xeSelect = this;
       var props = $xeSelect;
-      return Object.assign({}, getConfig().select.remoteConfig, props.remoteConfig);
+      return Object.assign({}, select_getConfig().select.remoteConfig, props.remoteConfig);
     },
     computeFilterOpts: function computeFilterOpts() {
       var $xeSelect = this;
       var props = $xeSelect;
-      return Object.assign({}, getConfig().select.filterConfig, props.filterConfig);
+      return Object.assign({}, select_getConfig().select.filterConfig, props.filterConfig);
     },
     computeOptionOpts: function computeOptionOpts() {
       var $xeSelect = this;
       var props = $xeSelect;
-      return Object.assign({}, getConfig().select.optionConfig, props.optionConfig);
+      return Object.assign({}, select_getConfig().select.optionConfig, props.optionConfig);
     },
     computeRadioOpts: function computeRadioOpts() {
       var $xeSelect = this;
       var props = $xeSelect;
-      return Object.assign({}, getConfig().select.radioConfig, props.radioConfig);
+      return Object.assign({}, select_getConfig().select.radioConfig, props.radioConfig);
     },
     computeCheckboxOpts: function computeCheckboxOpts() {
       var $xeSelect = this;
       var props = $xeSelect;
-      return Object.assign({}, getConfig().select.checkboxConfig, props.checkboxConfig);
+      return Object.assign({}, select_getConfig().select.checkboxConfig, props.checkboxConfig);
     },
     computeIsGroup: function computeIsGroup() {
       var $xeSelect = this;
@@ -54116,6 +54122,83 @@ function select_createInternalData() {
         return "".concat(labels.slice(0, multiMaxCharNum), "...");
       }
       return labels.join(', ');
+    },
+    computeScrollbarOpts: function computeScrollbarOpts() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      return Object.assign({}, select_getConfig().tree.scrollbarConfig, props.scrollbarConfig);
+    },
+    computeScrollbarXOpts: function computeScrollbarXOpts() {
+      var $xeSelect = this;
+      var scrollbarOpts = $xeSelect.computeScrollbarOpts;
+      return Object.assign({}, select_getConfig().scrollbar.xConfig, scrollbarOpts.xConfig, {
+        visible: false
+      });
+    },
+    computeScrollbarYOpts: function computeScrollbarYOpts() {
+      var $xeSelect = this;
+      var scrollbarOpts = $xeSelect.computeScrollbarOpts;
+      return Object.assign({}, select_getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
+    },
+    computeScrollXHeight: function computeScrollXHeight() {
+      var $xeSelect = this;
+      var scrollbarOpts = $xeSelect.computeScrollbarOpts;
+      var scrollbarXOpts = $xeSelect.computeScrollbarXOpts;
+      return select_getDefVal(select_getDefVal(scrollbarXOpts.height, scrollbarOpts.height), select_getConfig().scrollbar.height);
+    },
+    computeScrollYWidth: function computeScrollYWidth() {
+      var $xeSelect = this;
+      var scrollbarOpts = $xeSelect.computeScrollbarOpts;
+      var scrollbarYOpts = $xeSelect.computeScrollbarYOpts;
+      return select_getDefVal(select_getDefVal(scrollbarYOpts.width, scrollbarOpts.width), select_getConfig().scrollbar.width);
+    },
+    computeScrollXVisible: function computeScrollXVisible() {
+      var $xeSelect = this;
+      var scrollbarOpts = $xeSelect.computeScrollbarOpts;
+      var scrollbarXOpts = $xeSelect.computeScrollbarXOpts;
+      return select_getDefVal(scrollbarXOpts.visible, scrollbarOpts.visible);
+    },
+    computeScrollYVisible: function computeScrollYVisible() {
+      var $xeSelect = this;
+      var scrollbarOpts = $xeSelect.computeScrollbarOpts;
+      var scrollbarYOpts = $xeSelect.computeScrollbarYOpts;
+      return select_getDefVal(scrollbarYOpts.visible, scrollbarOpts.visible);
+    },
+    computeScrollXAutoHide: function computeScrollXAutoHide() {
+      var $xeSelect = this;
+      var scrollbarOpts = $xeSelect.computeScrollbarOpts;
+      var scrollbarXOpts = $xeSelect.computeScrollbarXOpts;
+      return select_getDefVal(select_getDefVal(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), select_getConfig().scrollbar.autoHide);
+    },
+    computeScrollYAutoHide: function computeScrollYAutoHide() {
+      var $xeSelect = this;
+      var scrollbarOpts = $xeSelect.computeScrollbarOpts;
+      var scrollbarYOpts = $xeSelect.computeScrollbarYOpts;
+      return select_getDefVal(select_getDefVal(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), select_getConfig().scrollbar.autoHide);
+    },
+    computeScrollbarWrapperClss: function computeScrollbarWrapperClss() {
+      var $xeSelect = this;
+      var reactData = $xeSelect.reactData;
+      var yThumbHeight = reactData.yThumbHeight,
+        xThumbWidth = reactData.xThumbWidth;
+      var scrollbarXToTop = $xeSelect.computeScrollbarXToTop;
+      var scrollbarYToLeft = $xeSelect.computeScrollbarYToLeft;
+      var scrollXVisible = $xeSelect.computeScrollXVisible;
+      var scrollYVisible = $xeSelect.computeScrollYVisible;
+      return select_domUtils.buildClass(['vxe-scrollbar is--virtual', "ov-x--".concat(scrollXVisible === false ? 'hidden' : 'visible'), "ov-y--".concat(scrollYVisible === false ? 'hidden' : 'visible'), "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom'), "sy-pos--".concat(scrollbarYToLeft ? 'left' : 'right')], {
+        'overflow-y': yThumbHeight,
+        'overflow-x': xThumbWidth
+      });
+    },
+    computeScrollbarXToTop: function computeScrollbarXToTop() {
+      var $xeSelect = this;
+      var scrollbarXOpts = $xeSelect.computeScrollbarXOpts;
+      return scrollbarXOpts.position === 'top';
+    },
+    computeScrollbarYToLeft: function computeScrollbarYToLeft() {
+      var $xeSelect = this;
+      var scrollbarYOpts = $xeSelect.computeScrollbarYOpts;
+      return scrollbarYOpts.position === 'left';
     }
   }),
   methods: {
@@ -54124,7 +54207,7 @@ function select_createInternalData() {
     //
     dispatchEvent: function dispatchEvent(type, params, evnt) {
       var $xeSelect = this;
-      $xeSelect.$emit(type, createEvent(evnt, {
+      $xeSelect.$emit(type, select_createEvent(evnt, {
         $select: $xeSelect
       }, params));
     },
@@ -54144,6 +54227,11 @@ function select_createInternalData() {
         value: value
       }, null);
     },
+    getScrollViewElem: function getScrollViewElem() {
+      var $xeSelect = this;
+      var viewEl = $xeSelect.$refs.refVirtualWrapper;
+      return viewEl || null;
+    },
     isPanelVisible: function isPanelVisible() {
       var $xeSelect = this;
       var reactData = $xeSelect.reactData;
@@ -54617,7 +54705,7 @@ function select_createInternalData() {
           if ($xeSelect.checkMaxLimit(currVlas)) {
             if (VxeUI) {
               VxeUI.modal.message({
-                content: getI18n('vxe.select.overSizeErr', [max]),
+                content: select_getI18n('vxe.select.overSizeErr', [max]),
                 status: 'warning'
               });
             }
@@ -54802,12 +54890,12 @@ function select_createInternalData() {
       var popupOpts = $xeSelect.computePopupOpts;
       var trigger = popupOpts.trigger;
       if (!isDisabled) {
-        var isTab = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.TAB);
-        var isEnter = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ENTER);
-        var isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
-        var isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
-        var isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
-        var isDel = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.DELETE);
+        var isTab = select_globalEvents.hasKey(evnt, select_GLOBAL_EVENT_KEYS.TAB);
+        var isEnter = select_globalEvents.hasKey(evnt, select_GLOBAL_EVENT_KEYS.ENTER);
+        var isEsc = select_globalEvents.hasKey(evnt, select_GLOBAL_EVENT_KEYS.ESCAPE);
+        var isUpArrow = select_globalEvents.hasKey(evnt, select_GLOBAL_EVENT_KEYS.ARROW_UP);
+        var isDwArrow = select_globalEvents.hasKey(evnt, select_GLOBAL_EVENT_KEYS.ARROW_DOWN);
+        var isDel = select_globalEvents.hasKey(evnt, select_GLOBAL_EVENT_KEYS.DELETE);
         if (isTab) {
           reactData.isActivated = false;
         }
@@ -55180,6 +55268,17 @@ function select_createInternalData() {
         }
       });
     },
+    updateScrollbar: function updateScrollbar() {
+      var $xeSelect = this;
+      var isVScrollbar = $xeSelect.computeIsVScrollbar;
+      if (isVScrollbar) {
+        return $xeSelect.$nextTick().then(function () {
+          $xeSelect.updateThumbSize();
+          $xeSelect.updateThumbOffset();
+        });
+      }
+      return Promise.resolve();
+    },
     /**
      * 重新计算列表
      */
@@ -55187,7 +55286,9 @@ function select_createInternalData() {
       var $xeSelect = this;
       var el = $xeSelect.$refs.refElem;
       if (el && el.clientWidth && el.clientHeight) {
-        return $xeSelect.computeScrollLoad();
+        return $xeSelect.computeScrollLoad().then(function () {
+          return $xeSelect.updateScrollbar();
+        });
       }
       return Promise.resolve();
     },
@@ -55228,6 +55329,7 @@ function select_createInternalData() {
       var scrollBodyElem = evnt.target;
       var scrollTop = scrollBodyElem.scrollTop;
       var scrollLeft = scrollBodyElem.scrollLeft;
+      $xeSelect.updateThumbOffset();
       var isX = scrollLeft !== internalData.lastScrollLeft;
       var isY = scrollTop !== internalData.lastScrollTop;
       internalData.lastScrollTop = scrollTop;
@@ -55324,6 +55426,29 @@ function select_createInternalData() {
       var optGroupKeyMaps = internalData.optGroupKeyMaps;
       return !!optGroupKeyMaps[optid];
     },
+    // 滚动条
+    bindScrollbarResize: function bindScrollbarResize() {
+      var $xeSelect = this;
+      var internalData = $xeSelect.internalData;
+      var isVScrollbar = $xeSelect.computeIsVScrollbar;
+      var scrollObserver = internalData.scrollObserver;
+      if (isVScrollbar) {
+        if (!scrollObserver) {
+          var el = $xeSelect.$refs.refElem;
+          var viewInnerEl = $xeSelect.$refs.refVirtualSpaceElem;
+          var _scrollObserver = select_globalResize.create(function () {
+            $xeSelect.reScrollFlag++;
+          });
+          if (el) {
+            _scrollObserver.observe(el);
+          }
+          if (viewInnerEl) {
+            _scrollObserver.observe(viewInnerEl);
+          }
+          internalData.scrollObserver = _scrollObserver;
+        }
+      }
+    },
     //
     // Render
     //
@@ -55333,7 +55458,7 @@ function select_createInternalData() {
       var showIcon = radioOpts.showIcon,
         trigger = radioOpts.trigger;
       if (isOptGroup || showIcon === false) {
-        return renderEmptyElement($xeSelect);
+        return select_renderEmptyElement($xeSelect);
       }
       var ons = {};
       if (!trigger || trigger === 'default') {
@@ -55351,7 +55476,7 @@ function select_createInternalData() {
         }],
         on: ons
       }, [h('span', {
-        class: ['vxe-radio--icon', isChecked ? getIcon().RADIO_CHECKED : isDisabled ? getIcon().RADIO_DISABLED_UNCHECKED : getIcon().RADIO_UNCHECKED]
+        class: ['vxe-radio--icon', isChecked ? select_getIcon().RADIO_CHECKED : isDisabled ? select_getIcon().RADIO_DISABLED_UNCHECKED : select_getIcon().RADIO_UNCHECKED]
       })]);
     },
     renderCheckbox: function renderCheckbox(h, option, isOptGroup, isChecked, isDisabled) {
@@ -55360,7 +55485,7 @@ function select_createInternalData() {
       var showIcon = checkboxOpts.showIcon,
         trigger = checkboxOpts.trigger;
       if (isOptGroup || showIcon === false) {
-        return renderEmptyElement($xeSelect);
+        return select_renderEmptyElement($xeSelect);
       }
       var ons = {};
       if (!trigger || trigger === 'default') {
@@ -55378,7 +55503,7 @@ function select_createInternalData() {
         }],
         on: ons
       }, [h('span', {
-        class: ['vxe-checkbox--icon', isChecked ? getIcon().CHECKBOX_CHECKED : isDisabled ? getIcon().CHECKBOX_DISABLED_UNCHECKED : getIcon().CHECKBOX_UNCHECKED]
+        class: ['vxe-checkbox--icon', isChecked ? select_getIcon().CHECKBOX_CHECKED : isDisabled ? select_getIcon().CHECKBOX_DISABLED_UNCHECKED : select_getIcon().CHECKBOX_UNCHECKED]
       })]);
     },
     renderOption: function renderOption(h, list) {
@@ -55485,8 +55610,8 @@ function select_createInternalData() {
           key: 2,
           class: 'vxe-select-option--add-icon'
         }, [h('i', {
-          class: getIcon().SELECT_ADD_OPTION
-        })]) : renderEmptyElement($xeSelect)] : optVNs) : renderEmptyElement($xeSelect);
+          class: select_getIcon().SELECT_ADD_OPTION
+        })]) : select_renderEmptyElement($xeSelect)] : optVNs) : select_renderEmptyElement($xeSelect);
       });
     },
     renderOpts: function renderOpts(h) {
@@ -55499,17 +55624,17 @@ function select_createInternalData() {
         return [h('div', {
           class: 'vxe-select--search-loading'
         }, [h('i', {
-          class: ['vxe-select--search-icon', getIcon().SELECT_LOADED]
+          class: ['vxe-select--search-icon', select_getIcon().SELECT_LOADED]
         }), h('span', {
           class: 'vxe-select--search-text'
-        }, getI18n('vxe.select.loadingText'))])];
+        }, select_getI18n('vxe.select.loadingText'))])];
       }
       if (optList.length) {
         return $xeSelect.renderOption(h, optList);
       }
       return [h('div', {
         class: 'vxe-select--empty-placeholder'
-      }, props.emptyText || getI18n('vxe.select.emptyText'))];
+      }, props.emptyText || select_getI18n('vxe.select.emptyText'))];
     },
     renderVN: function renderVN(h) {
       var $xeSelect = this;
@@ -55530,8 +55655,11 @@ function select_createInternalData() {
         optList = reactData.optList,
         visiblePanel = reactData.visiblePanel,
         bodyHeight = reactData.bodyHeight,
-        topSpaceHeight = reactData.topSpaceHeight;
+        topSpaceHeight = reactData.topSpaceHeight,
+        xThumbWidth = reactData.xThumbWidth,
+        yThumbHeight = reactData.yThumbHeight;
       var vSize = $xeSelect.computeSize;
+      var isVScrollbar = $xeSelect.computeIsVScrollbar;
       var isDisabled = $xeSelect.computeIsDisabled;
       var selectLabel = $xeSelect.computeSelectLabel;
       var fullLabel = $xeSelect.computeFullLabel;
@@ -55561,6 +55689,14 @@ function select_createInternalData() {
       var footerSlot = slots.footer;
       var prefixSlot = slots.prefix;
       var ppClassName = popupOpts.className || props.popupClassName;
+      var scrollbarOpts = $xeSelect.computeScrollbarOpts;
+      var scrollXVisible = $xeSelect.computeScrollXVisible;
+      var scrollYVisible = $xeSelect.computeScrollYVisible;
+      var scrollbarXToTop = $xeSelect.computeScrollbarXToTop;
+      var scrollbarYToLeft = $xeSelect.computeScrollbarYToLeft;
+      var scrollXAutoHide = $xeSelect.computeScrollXAutoHide;
+      var scrollYAutoHide = $xeSelect.computeScrollYAutoHide;
+      var scrollbarWrapperClss = $xeSelect.computeScrollbarWrapperClss;
       return h('div', {
         ref: 'refElem',
         class: ['vxe-select', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
@@ -55579,7 +55715,7 @@ function select_createInternalData() {
           disabled: isDisabled,
           type: 'text',
           prefixIcon: props.prefixIcon,
-          suffixIcon: loading ? getIcon().SELECT_LOADED : visiblePanel ? getIcon().SELECT_OPEN : getIcon().SELECT_CLOSE,
+          suffixIcon: loading ? select_getIcon().SELECT_LOADED : visiblePanel ? select_getIcon().SELECT_OPEN : select_getIcon().SELECT_CLOSE,
           autoFocus: false,
           title: fullLabel,
           value: selectLabel
@@ -55619,8 +55755,8 @@ function select_createInternalData() {
           clearable: true,
           disabled: false,
           readonly: false,
-          placeholder: getI18n('vxe.select.search'),
-          prefixIcon: getIcon().INPUT_SEARCH
+          placeholder: select_getI18n('vxe.select.search'),
+          prefixIcon: select_getIcon().INPUT_SEARCH
         },
         on: {
           'model-value': $xeSelect.modelSearchEvent,
@@ -55628,7 +55764,7 @@ function select_createInternalData() {
           change: $xeSelect.triggerSearchEvent,
           search: $xeSelect.triggerSearchEvent
         }
-      })]) : renderEmptyElement($xeSelect), showCheckedButton && multiple || showClearButton || headerSlot ? h('div', {
+      })]) : select_renderEmptyElement($xeSelect), showCheckedButton && multiple || showClearButton || headerSlot ? h('div', {
         class: 'vxe-select--panel-header'
       }, headerSlot ? $xeSelect.callSlot(headerSlot, {}, h) : [h('div', {
         class: 'vxe-tree-select--header-button'
@@ -55636,22 +55772,29 @@ function select_createInternalData() {
         class: 'vxe-tree-select--header-btns'
       }, [showCheckedButton && multiple ? h(packages_button, {
         props: {
-          content: getI18n('vxe.select.allChecked'),
+          content: select_getI18n('vxe.select.allChecked'),
           mode: 'text'
         },
         on: {
           click: $xeSelect.allCheckedPanelEvent
         }
-      }) : renderEmptyElement($xeSelect), showClearButton ? h(packages_button, {
+      }) : select_renderEmptyElement($xeSelect), showClearButton ? h(packages_button, {
         props: {
-          content: getI18n('vxe.select.clear'),
+          content: select_getI18n('vxe.select.clear'),
           mode: 'text'
         },
         on: {
           click: $xeSelect.clearCheckedPanelEvent
         }
-      }) : renderEmptyElement($xeSelect)])])]) : renderEmptyElement($xeSelect), h('div', {
-        class: 'vxe-select--panel-body'
+      }) : select_renderEmptyElement($xeSelect)])])]) : select_renderEmptyElement($xeSelect), h('div', {
+        class: ['vxe-select--panel-body', isVScrollbar ? "ov-x--".concat(scrollXVisible === false ? 'hidden' : 'visible') : '', isVScrollbar ? "ov-y--".concat(scrollYVisible === false ? 'hidden' : 'visible') : '', isVScrollbar ? "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom') : '', isVScrollbar ? "sy-pos--".concat(scrollbarYToLeft ? 'left' : 'right') : '', {
+          'is--virtual-scrollbar': isVScrollbar,
+          'ov-padding': isVScrollbar && scrollbarOpts.padding,
+          'ov-x--auto-hide': isVScrollbar && scrollXAutoHide,
+          'ov-y--auto-hide': isVScrollbar && scrollYAutoHide,
+          'overflow-y': yThumbHeight,
+          'overflow-x': xThumbWidth
+        }]
       }, [h('div', {
         ref: 'refVirtualWrapper',
         class: 'vxe-select-option--wrapper',
@@ -55659,6 +55802,7 @@ function select_createInternalData() {
           scroll: $xeSelect.scrollEvent
         }
       }, [h('div', {
+        ref: 'refVirtualSpaceElem',
         class: 'vxe-select--y-space',
         style: {
           height: bodyHeight ? "".concat(bodyHeight, "px") : ''
@@ -55669,23 +55813,61 @@ function select_createInternalData() {
         style: {
           transform: "translateY(".concat(topSpaceHeight, "px)")
         }
-      }, $xeSelect.renderOpts(h))])]), footerSlot || showTotalButton || showCloseButton && multiple ? h('div', {
+      }, $xeSelect.renderOpts(h))]),
+      /**
+       * 滚动条
+       */
+      isVScrollbar ? h('div', {
+        class: scrollbarWrapperClss
+      }, [scrollXVisible === false ? select_renderEmptyElement($xeSelect) : h('div', {
+        ref: 'refTrackXElem',
+        class: 'vxe-scrollbar--track-x',
+        on: {
+          click: $xeSelect.clickTrackXEvent
+        }
+      }, [h('div', {
+        ref: 'refThumbXElem',
+        class: 'vxe-scrollbar--thumb-x',
+        on: {
+          pointerdown: $xeSelect.pointerdownThumbXEvent,
+          pointermove: $xeSelect.pointermoveThumbXEvent,
+          pointerup: $xeSelect.cleatPointerThumbEvent,
+          pointercancel: $xeSelect.cleatPointerThumbEvent,
+          lostpointercapture: $xeSelect.cleatPointerThumbEvent
+        }
+      })]), scrollYVisible === false ? select_renderEmptyElement($xeSelect) : h('div', {
+        ref: 'refTrackYElem',
+        class: 'vxe-scrollbar--track-y',
+        on: {
+          click: $xeSelect.clickTrackYEvent
+        }
+      }, [h('div', {
+        ref: 'refThumbYElem',
+        class: 'vxe-scrollbar--thumb-y',
+        on: {
+          pointerdown: $xeSelect.pointerdownThumbYEvent,
+          pointermove: $xeSelect.pointermoveThumbYEvent,
+          pointerup: $xeSelect.cleatPointerThumbEvent,
+          pointercancel: $xeSelect.cleatPointerThumbEvent,
+          lostpointercapture: $xeSelect.cleatPointerThumbEvent
+        }
+      })])]) : select_renderEmptyElement($xeSelect)]), footerSlot || showTotalButton || showCloseButton && multiple ? h('div', {
         class: 'vxe-select--panel-footer'
       }, footerSlot ? $xeSelect.callSlot(footerSlot, {}, h) : [h('div', {
         class: 'vxe-select--footer-button'
       }, [showTotalButton ? h('div', {
         class: 'vxe-select--total-btns'
-      }, getI18n('vxe.select.total', [selectVals.length, optList.length])) : renderEmptyElement($xeSelect), showCloseButton && multiple ? h('div', {
+      }, select_getI18n('vxe.select.total', [selectVals.length, optList.length])) : select_renderEmptyElement($xeSelect), showCloseButton && multiple ? h('div', {
         class: 'vxe-select--oper-btns'
       }, [h(packages_button, {
         props: {
-          content: getI18n('vxe.select.close'),
+          content: select_getI18n('vxe.select.close'),
           mode: 'text'
         },
         on: {
           click: $xeSelect.closePanelEvent
         }
-      })]) : renderEmptyElement($xeSelect)])]) : renderEmptyElement($xeSelect)])] : [])]);
+      })]) : select_renderEmptyElement($xeSelect)])]) : select_renderEmptyElement($xeSelect)])] : [])]);
     }
   },
   watch: {
@@ -55700,6 +55882,47 @@ function select_createInternalData() {
     optionGroups: function optionGroups(val) {
       var $xeSelect = this;
       $xeSelect.loadData(val);
+    },
+    computeIsVScrollbar: function computeIsVScrollbar() {
+      var $xeSelect = this;
+      $xeSelect.$nextTick(function () {
+        $xeSelect.bindScrollbarResize();
+        $xeSelect.$nextTick(function () {
+          $xeSelect.reLayoutFlag++;
+        });
+      });
+    },
+    computeScrollYWidth: function computeScrollYWidth() {
+      var $xeSelect = this;
+      $xeSelect.reLayoutFlag++;
+    },
+    computeScrollXHeight: function computeScrollXHeight() {
+      var $xeSelect = this;
+      $xeSelect.reLayoutFlag++;
+    },
+    computeScrollXVisible: function computeScrollXVisible() {
+      var $xeSelect = this;
+      $xeSelect.$nextTick(function () {
+        $xeSelect.reLayoutFlag++;
+      });
+    },
+    computeScrollYVisible: function computeScrollYVisible() {
+      var $xeSelect = this;
+      $xeSelect.$nextTick(function () {
+        $xeSelect.reLayoutFlag++;
+      });
+    },
+    reLayoutFlag: function reLayoutFlag() {
+      var $xeSelect = this;
+      $xeSelect.recalculate().then(function () {
+        $xeSelect.recalculate();
+      });
+    },
+    reScrollFlag: function reScrollFlag() {
+      var $xeSelect = this;
+      $xeSelect.updateScrollbar().then(function () {
+        $xeSelect.updateScrollbar();
+      });
     }
   },
   created: function created() {
@@ -55718,23 +55941,30 @@ function select_createInternalData() {
         $xeSelect.loadData(options);
       }
     });
-    globalEvents.on($xeSelect, 'mousedown', $xeSelect.handleGlobalMousedownEvent);
-    globalEvents.on($xeSelect, 'keydown', $xeSelect.handleGlobalKeydownEvent);
-    globalEvents.on($xeSelect, 'blur', $xeSelect.handleGlobalBlurEvent);
-    globalEvents.on($xeSelect, 'resize', $xeSelect.handleGlobalResizeEvent);
-    globalEvents.on($xeSelect, 'scroll', $xeSelect.handleGlobalScrollEvent);
+    $xeSelect.reLayoutFlag++;
+    $xeSelect.bindScrollbarResize();
+    select_globalEvents.on($xeSelect, 'mousedown', $xeSelect.handleGlobalMousedownEvent);
+    select_globalEvents.on($xeSelect, 'keydown', $xeSelect.handleGlobalKeydownEvent);
+    select_globalEvents.on($xeSelect, 'blur', $xeSelect.handleGlobalBlurEvent);
+    select_globalEvents.on($xeSelect, 'resize', $xeSelect.handleGlobalResizeEvent);
+    select_globalEvents.on($xeSelect, 'scroll', $xeSelect.handleGlobalScrollEvent);
   },
   beforeDestroy: function beforeDestroy() {
     var $xeSelect = this;
+    var internalData = $xeSelect.internalData;
+    var scrollObserver = internalData.scrollObserver;
     var panelElem = $xeSelect.$refs.refOptionPanel;
     if (panelElem && panelElem.parentNode) {
       panelElem.parentNode.removeChild(panelElem);
     }
-    globalEvents.off($xeSelect, 'mousedown');
-    globalEvents.off($xeSelect, 'keydown');
-    globalEvents.off($xeSelect, 'blur');
-    globalEvents.off($xeSelect, 'resize');
-    globalEvents.off($xeSelect, 'scroll');
+    if (scrollObserver) {
+      scrollObserver.disconnect();
+    }
+    select_globalEvents.off($xeSelect, 'mousedown');
+    select_globalEvents.off($xeSelect, 'keydown');
+    select_globalEvents.off($xeSelect, 'blur');
+    select_globalEvents.off($xeSelect, 'resize');
+    select_globalEvents.off($xeSelect, 'scroll');
   },
   destroyed: function destroyed() {
     var $xeSelect = this;
@@ -63635,7 +63865,7 @@ var tabs_createComponentLog = createComponentLog('tabs'),
 var scrollbarOffsetSize = 20;
 /* harmony default export */ var tabs = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeTabs',
-  mixins: [globalMixins.sizeMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin],
   props: {
     value: [String, Number, Boolean],
     options: Array,
@@ -66226,14 +66456,11 @@ var tree_createComponentLog = createComponentLog('tree'),
   tree_warnLog = tree_createComponentLog.warnLog,
   tree_errLog = tree_createComponentLog.errLog;
 var tree_menus = VxeUI.menus,
-  tree_scrollbarUtils = VxeUI.scrollbarUtils,
   tree_getConfig = VxeUI.getConfig,
   tree_getI18n = VxeUI.getI18n,
-  tree_getIcon = VxeUI.getIcon;
-var tree_getThumbOffsetSize = tree_scrollbarUtils.getThumbOffsetSize,
-  tree_getThumbSize = tree_scrollbarUtils.getThumbSize,
-  tree_getScrollFromClick = tree_scrollbarUtils.getScrollFromClick,
-  tree_getScrollFromDrag = tree_scrollbarUtils.getScrollFromDrag;
+  tree_getIcon = VxeUI.getIcon,
+  tree_baseUtils = VxeUI.baseUtils;
+var tree_getDefVal = tree_baseUtils.getDefVal;
 var crossTreeDragNodeObj = null;
 /**
  * 生成节点的唯一主键
@@ -66789,7 +67016,7 @@ function tree_createInternalData() {
 }
 /* harmony default export */ var tree = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeTree',
-  mixins: [globalMixins.sizeMixin],
+  mixins: [globalMixins.sizeMixin, globalMixins.vScrollbarMixin, globalMixins.initVScrollbarMixin],
   props: {
     data: Array,
     autoResize: {
@@ -66969,7 +67196,7 @@ function tree_createInternalData() {
     useScrollbar: {
       type: Boolean,
       default: function _default() {
-        return getDefaultConfig(tree_getConfig().tree.useScrollbar, tree_getConfig().useScrollbar);
+        return tree_getDefVal(tree_getConfig().tree.useScrollbar, tree_getConfig().useScrollbar);
       }
     },
     scrollbarConfig: Object
@@ -66987,7 +67214,8 @@ function tree_createInternalData() {
       xID: xID,
       reactData: reactData,
       crossTreeDragNodeInfo: crossTreeDragNodeGlobal,
-      reFlag: 0,
+      reLayoutFlag: 0,
+      reScrollFlag: 0,
       dataFlag: 0
     });
   },
@@ -67164,37 +67392,37 @@ function tree_createInternalData() {
       var $xeTree = this;
       var scrollbarOpts = $xeTree.computeScrollbarOpts;
       var scrollbarXOpts = $xeTree.computeScrollbarXOpts;
-      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), tree_getConfig().scrollbar.height);
+      return tree_getDefVal(tree_getDefVal(scrollbarXOpts.height, scrollbarOpts.height), tree_getConfig().scrollbar.height);
     },
     computeScrollYWidth: function computeScrollYWidth() {
       var $xeTree = this;
       var scrollbarOpts = $xeTree.computeScrollbarOpts;
       var scrollbarYOpts = $xeTree.computeScrollbarYOpts;
-      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), tree_getConfig().scrollbar.width);
+      return tree_getDefVal(tree_getDefVal(scrollbarYOpts.width, scrollbarOpts.width), tree_getConfig().scrollbar.width);
     },
     computeScrollXVisible: function computeScrollXVisible() {
       var $xeTree = this;
       var scrollbarOpts = $xeTree.computeScrollbarOpts;
       var scrollbarXOpts = $xeTree.computeScrollbarXOpts;
-      return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
+      return tree_getDefVal(scrollbarXOpts.visible, scrollbarOpts.visible);
     },
     computeScrollYVisible: function computeScrollYVisible() {
       var $xeTree = this;
       var scrollbarOpts = $xeTree.computeScrollbarOpts;
       var scrollbarYOpts = $xeTree.computeScrollbarYOpts;
-      return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible);
+      return tree_getDefVal(scrollbarYOpts.visible, scrollbarOpts.visible);
     },
     computeScrollXAutoHide: function computeScrollXAutoHide() {
       var $xeTree = this;
       var scrollbarOpts = $xeTree.computeScrollbarOpts;
       var scrollbarXOpts = $xeTree.computeScrollbarXOpts;
-      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), tree_getConfig().scrollbar.autoHide);
+      return tree_getDefVal(tree_getDefVal(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), tree_getConfig().scrollbar.autoHide);
     },
     computeScrollYAutoHide: function computeScrollYAutoHide() {
       var $xeTree = this;
       var scrollbarOpts = $xeTree.computeScrollbarOpts;
       var scrollbarYOpts = $xeTree.computeScrollbarYOpts;
-      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), tree_getConfig().scrollbar.autoHide);
+      return tree_getDefVal(tree_getDefVal(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), tree_getConfig().scrollbar.autoHide);
     },
     computeScrollbarWrapperClss: function computeScrollbarWrapperClss() {
       var $xeTree = this;
@@ -67231,6 +67459,11 @@ function tree_createInternalData() {
         $tree: $xeTree
       }, params));
     },
+    getScrollViewElem: function getScrollViewElem() {
+      var $xeTree = this;
+      var viewEl = $xeTree.$refs.refVirtualWrapper;
+      return viewEl || null;
+    },
     getNodeId: function getNodeId(node) {
       var $xeTree = this;
       if (!node) {
@@ -67870,8 +68103,14 @@ function tree_createInternalData() {
     },
     updateScrollbar: function updateScrollbar() {
       var $xeTree = this;
-      $xeTree.updateThumbSize();
-      $xeTree.updateThumbOffset();
+      var isVScrollbar = $xeTree.computeIsVScrollbar;
+      if (isVScrollbar) {
+        return $xeTree.$nextTick().then(function () {
+          $xeTree.updateThumbSize();
+          $xeTree.updateThumbOffset();
+        });
+      }
+      return Promise.resolve();
     },
     /**
      * 重新计算列表
@@ -67897,11 +68136,11 @@ function tree_createInternalData() {
           var parentPaddingSize = getPaddingTopBottomSize(parentEl);
           reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight);
         }
-        $xeTree.updateScrollbar();
         $xeTree.updateHeight();
         return $xeTree.computeScrollLoad().then(function () {
           $xeTree.updateHeight();
           $xeTree.updateYSpace();
+          $xeTree.updateScrollbar();
         });
       }
       return $xeTree.$nextTick();
@@ -67941,7 +68180,7 @@ function tree_createInternalData() {
       var $xeTree = this;
       var reactData = $xeTree.reactData;
       var internalData = $xeTree.internalData;
-      var scrollBodyElem = evnt.target;
+      var scrollBodyElem = evnt.currentTarget;
       var scrollTop = scrollBodyElem.scrollTop;
       var scrollLeft = scrollBodyElem.scrollLeft;
       var isX = scrollLeft !== internalData.lastScrollLeft;
@@ -69734,186 +69973,26 @@ function tree_createInternalData() {
       }
     },
     // 滚动条
-    updateThumbSize: function updateThumbSize() {
+    bindScrollbarResize: function bindScrollbarResize() {
       var $xeTree = this;
-      var reactData = $xeTree.reactData;
-      var viewEl = $xeTree.$refs.refVirtualWrapper;
-      if (!viewEl) {
-        return;
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return;
-      }
-      var trackXEl = $xeTree.$refs.refTrackXElem;
-      var xThumbWidth = trackXEl ? tree_getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
-      var thumbXElem = $xeTree.$refs.refThumbXElem;
-      if (thumbXElem) {
-        thumbXElem.style.width = xThumbWidth + 'px';
-      }
-      reactData.xThumbWidth = xThumbWidth;
-      var trackYEl = $xeTree.$refs.refTrackYElem;
-      var yThumbHeight = trackYEl ? tree_getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
-      var thumbYElem = $xeTree.$refs.refThumbYElem;
-      if (thumbYElem) {
-        thumbYElem.style.height = yThumbHeight + 'px';
-      }
-      reactData.yThumbHeight = yThumbHeight;
-    },
-    updateThumbOffset: function updateThumbOffset() {
-      var $xeTree = this;
-      var reactData = $xeTree.reactData;
       var internalData = $xeTree.internalData;
-      var viewEl = $xeTree.$refs.refVirtualWrapper;
-      if (!viewEl) {
-        return;
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return;
-      }
-      var xThumbWidth = reactData.xThumbWidth,
-        yThumbHeight = reactData.yThumbHeight;
-      var trackXEl = $xeTree.$refs.refTrackXElem;
-      var thumbXElem = $xeTree.$refs.refThumbXElem;
-      var xThumbLeft = trackXEl && xThumbWidth ? tree_getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
-      internalData.xThumbLeft = xThumbLeft;
-      if (thumbXElem && xThumbWidth) {
-        thumbXElem.style.width = xThumbWidth + 'px';
-        thumbXElem.style.transform = "translateX(".concat(xThumbLeft, "px)");
-      }
-      var trackYEl = $xeTree.$refs.refTrackYElem;
-      var thumbYElem = $xeTree.$refs.refThumbYElem;
-      var yThumbTop = trackYEl && yThumbHeight ? tree_getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
-      internalData.yThumbTop = yThumbTop;
-      if (thumbYElem && yThumbHeight) {
-        thumbYElem.style.height = yThumbHeight + 'px';
-        thumbYElem.style.transform = "translateY(".concat(yThumbTop, "px)");
-      }
-    },
-    clickTrackXEvent: function clickTrackXEvent(evnt) {
-      var $xeTree = this;
-      var reactData = $xeTree.reactData;
-      var trackEl = evnt.currentTarget;
-      if (trackEl !== evnt.target) {
-        return;
-      }
-      var viewEl = $xeTree.$refs.refVirtualWrapper;
-      if (!viewEl) {
-        return;
-      }
-      var xThumbWidth = reactData.xThumbWidth;
-      var trackRect = trackEl.getBoundingClientRect();
-      viewEl.scrollTo({
-        left: tree_getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
-        behavior: 'auto'
-      });
-    },
-    clickTrackYEvent: function clickTrackYEvent(evnt) {
-      var $xeTree = this;
-      var reactData = $xeTree.reactData;
-      var trackEl = evnt.currentTarget;
-      if (trackEl !== evnt.target) {
-        return;
-      }
-      var viewEl = $xeTree.$refs.refVirtualWrapper;
-      if (!viewEl) {
-        return;
-      }
-      var yThumbHeight = reactData.yThumbHeight;
-      var trackRect = trackEl.getBoundingClientRect();
-      viewEl.scrollTo({
-        top: tree_getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
-        behavior: 'auto'
-      });
-    },
-    pointerdownThumbXEvent: function pointerdownThumbXEvent(evnt) {
-      var $xeTree = this;
-      var reactData = $xeTree.reactData;
-      var internalData = $xeTree.internalData;
-      var thumbEl = evnt.currentTarget;
-      internalData.isThumbDrag = true;
-      thumbEl.setPointerCapture(evnt.pointerId);
-      var viewEl = $xeTree.$refs.refVirtualWrapper;
-      if (!viewEl) {
-        return;
-      }
-      var xThumbWidth = reactData.xThumbWidth;
-      var trackEl = thumbEl.parentElement;
-      var trackRect = trackEl.getBoundingClientRect();
-      var pointerPosition = evnt.clientX - trackRect.left;
-      // 记录 thumb 的偏移
-      var thumbOffset = tree_getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-      internalData.thumbDragOffset = pointerPosition - thumbOffset;
-    },
-    pointermoveThumbXEvent: function pointermoveThumbXEvent(evnt) {
-      var $xeTree = this;
-      var reactData = $xeTree.reactData;
-      var internalData = $xeTree.internalData;
-      var thumbEl = evnt.currentTarget;
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return;
-      }
-      var isThumbDrag = internalData.isThumbDrag,
-        thumbDragOffset = internalData.thumbDragOffset;
-      if (isThumbDrag) {
-        var viewEl = $xeTree.$refs.refVirtualWrapper;
-        if (!viewEl) {
-          return;
-        }
-        var xThumbWidth = reactData.xThumbWidth;
-        var _thumbEl = evnt.currentTarget;
-        var trackEl = _thumbEl.parentElement;
-        var trackRect = trackEl.getBoundingClientRect();
-        // 更新偏移
-        viewEl.scrollLeft = tree_getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-      }
-    },
-    cleatPointerThumbEvent: function cleatPointerThumbEvent(evnt) {
-      var $xeTree = this;
-      var internalData = $xeTree.internalData;
-      var thumbEl = evnt.currentTarget;
-      thumbEl.releasePointerCapture(evnt.pointerId);
-      internalData.isThumbDrag = false;
-    },
-    pointerdownThumbYEvent: function pointerdownThumbYEvent(evnt) {
-      var $xeTree = this;
-      var reactData = $xeTree.reactData;
-      var internalData = $xeTree.internalData;
-      var thumbEl = evnt.currentTarget;
-      internalData.isThumbDrag = true;
-      thumbEl.setPointerCapture(evnt.pointerId);
-      var viewEl = $xeTree.$refs.refVirtualWrapper;
-      if (!viewEl) {
-        return;
-      }
-      var yThumbHeight = reactData.yThumbHeight;
-      var trackEl = thumbEl.parentElement;
-      var trackRect = trackEl.getBoundingClientRect();
-      var pointerPosition = evnt.clientY - trackRect.top;
-      // 记录 thumb 的偏移
-      var thumbOffset = tree_getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
-      internalData.thumbDragOffset = pointerPosition - thumbOffset;
-    },
-    pointermoveThumbYEvent: function pointermoveThumbYEvent(evnt) {
-      var $xeTree = this;
-      var reactData = $xeTree.reactData;
-      var internalData = $xeTree.internalData;
-      var thumbEl = evnt.currentTarget;
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return;
-      }
-      var isThumbDrag = internalData.isThumbDrag,
-        thumbDragOffset = internalData.thumbDragOffset;
-      if (isThumbDrag) {
-        var viewEl = $xeTree.$refs.refVirtualWrapper;
-        if (!viewEl) {
-          return;
+      var isVScrollbar = $xeTree.computeIsVScrollbar;
+      var scrollObserver = internalData.scrollObserver;
+      if (isVScrollbar) {
+        if (!scrollObserver) {
+          var el = $xeTree.$refs.refElem;
+          var viewInnerEl = $xeTree.$refs.refVirtualSpaceElem;
+          var _scrollObserver = globalResize.create(function () {
+            $xeTree.reScrollFlag++;
+          });
+          if (el) {
+            _scrollObserver.observe(el);
+          }
+          if (viewInnerEl) {
+            _scrollObserver.observe(viewInnerEl);
+          }
+          internalData.scrollObserver = _scrollObserver;
         }
-        var yThumbHeight = reactData.yThumbHeight;
-        var _thumbEl2 = evnt.currentTarget;
-        var trackEl = _thumbEl2.parentElement;
-        var trackRect = trackEl.getBoundingClientRect();
-        // 更新偏移
-        viewEl.scrollTop = tree_getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
       }
     },
     //
@@ -70250,8 +70329,7 @@ function tree_createInternalData() {
       var reactData = $xeTree.reactData;
       var loading = props.loading,
         trigger = props.trigger,
-        showLine = props.showLine,
-        useScrollbar = props.useScrollbar;
+        showLine = props.showLine;
       var bodyHeight = reactData.bodyHeight,
         topSpaceHeight = reactData.topSpaceHeight,
         treeList = reactData.treeList,
@@ -70259,6 +70337,7 @@ function tree_createInternalData() {
         xThumbWidth = reactData.xThumbWidth,
         yThumbHeight = reactData.yThumbHeight;
       var vSize = $xeTree.computeSize;
+      var isVScrollbar = $xeTree.computeIsVScrollbar;
       var radioOpts = $xeTree.computeRadioOpts;
       var checkboxOpts = $xeTree.computeCheckboxOpts;
       var loadingOpts = $xeTree.computeLoadingOpts;
@@ -70285,7 +70364,7 @@ function tree_createInternalData() {
       }
       return h('div', {
         ref: 'refElem',
-        class: ['vxe-tree', useScrollbar ? "ov-x--".concat(scrollXVisible === false ? 'hidden' : 'visible') : '', useScrollbar ? "ov-y--".concat(scrollYVisible === false ? 'hidden' : 'visible') : '', useScrollbar ? "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom') : '', useScrollbar ? "sy-pos--".concat(scrollbarYToLeft ? 'left' : 'right') : '', (_ref = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, "size--".concat(vSize), vSize), 'show--line', showLine), 'is--virtual-scrollbar', useScrollbar), 'ov-padding', useScrollbar && scrollbarOpts.padding), 'ov-x--auto-hide', useScrollbar && scrollXAutoHide), 'ov-y--auto-hide', useScrollbar && scrollYAutoHide), 'overflow-y', yThumbHeight), 'overflow-x', xThumbWidth), 'checkbox--highlight', checkboxOpts.highlight), 'radio--highlight', radioOpts.highlight), _defineProperty(_defineProperty(_defineProperty(_ref, 'node--hover', isNodeHover), 'node--trigger', trigger === 'node'), 'is--loading', loading))],
+        class: ['vxe-tree', isVScrollbar ? "ov-x--".concat(scrollXVisible === false ? 'hidden' : 'visible') : '', isVScrollbar ? "ov-y--".concat(scrollYVisible === false ? 'hidden' : 'visible') : '', isVScrollbar ? "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom') : '', isVScrollbar ? "sy-pos--".concat(scrollbarYToLeft ? 'left' : 'right') : '', (_ref = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, "size--".concat(vSize), vSize), 'show--line', showLine), 'is--virtual-scrollbar', isVScrollbar), 'ov-padding', isVScrollbar && scrollbarOpts.padding), 'ov-x--auto-hide', isVScrollbar && scrollXAutoHide), 'ov-y--auto-hide', isVScrollbar && scrollYAutoHide), 'overflow-y', yThumbHeight), 'overflow-x', xThumbWidth), 'checkbox--highlight', checkboxOpts.highlight), 'radio--highlight', radioOpts.highlight), _defineProperty(_defineProperty(_defineProperty(_ref, 'node--hover', isNodeHover), 'node--trigger', trigger === 'node'), 'is--loading', loading))],
         style: wrapperStyles,
         on: teOns
       }, [headerSlot ? h('div', {
@@ -70301,6 +70380,7 @@ function tree_createInternalData() {
           scroll: $xeTree.scrollEvent
         }
       }, [h('div', {
+        ref: 'refVirtualSpaceElem',
         class: 'vxe-tree--y-space',
         style: {
           height: bodyHeight ? "".concat(bodyHeight, "px") : ''
@@ -70320,7 +70400,7 @@ function tree_createInternalData() {
       /**
        * 滚动条
        */
-      useScrollbar ? h('div', {
+      isVScrollbar ? h('div', {
         class: scrollbarWrapperClss
       }, [scrollXVisible === false ? renderEmptyElement($xeTree) : h('div', {
         ref: 'refTrackXElem',
@@ -70444,45 +70524,56 @@ function tree_createInternalData() {
     },
     height: function height() {
       var $xeTree = this;
-      $xeTree.reFlag++;
+      $xeTree.reLayoutFlag++;
     },
     minHeight: function minHeight() {
       var $xeTree = this;
-      $xeTree.reFlag++;
+      $xeTree.reLayoutFlag++;
     },
     maxHeight: function maxHeight() {
       var $xeTree = this;
-      $xeTree.reFlag++;
+      $xeTree.reLayoutFlag++;
     },
-    useScrollbar: function useScrollbar() {
+    computeIsVScrollbar: function computeIsVScrollbar() {
       var $xeTree = this;
-      $xeTree.reFlag++;
+      $xeTree.$nextTick(function () {
+        $xeTree.bindScrollbarResize();
+        $xeTree.$nextTick(function () {
+          $xeTree.reLayoutFlag++;
+        });
+      });
     },
     computeScrollYWidth: function computeScrollYWidth() {
       var $xeTree = this;
-      $xeTree.reFlag++;
+      $xeTree.reLayoutFlag++;
     },
     computeScrollXHeight: function computeScrollXHeight() {
       var $xeTree = this;
-      $xeTree.reFlag++;
+      $xeTree.reLayoutFlag++;
     },
     computeScrollXVisible: function computeScrollXVisible() {
       var $xeTree = this;
       $xeTree.$nextTick(function () {
-        $xeTree.reFlag++;
+        $xeTree.reLayoutFlag++;
       });
     },
     computeScrollYVisible: function computeScrollYVisible() {
       var $xeTree = this;
       $xeTree.$nextTick(function () {
-        $xeTree.reFlag++;
+        $xeTree.reLayoutFlag++;
       });
     },
-    reFlag: function reFlag() {
+    reLayoutFlag: function reLayoutFlag() {
       var $xeTree = this;
       $xeTree.recalculate().then(function () {
         $xeTree.recalculate();
       });
+    },
+    reScrollFlag: function reScrollFlag() {
+      var $xeTree = this;
+      $xeTree.updateScrollbar().then(function () {
+        $xeTree.updateScrollbar();
+      });
     }
   },
   created: function created() {
@@ -70503,8 +70594,7 @@ function tree_createInternalData() {
       showOverflow = props.showOverflow,
       lazy = props.lazy,
       loadMethod = props.loadMethod,
-      autoResize = props.autoResize,
-      useScrollbar = props.useScrollbar;
+      autoResize = props.autoResize;
     var dragOpts = $xeTree.computeDragOpts;
     if (!showOverflow) {
       tree_errLog('vxe.error.errProp', ['show-overflow=false', 'show-overflow=true']);
@@ -70525,25 +70615,12 @@ function tree_createInternalData() {
     if (menuConfig && !VxeUIContextMenu) {
       tree_errLog('vxe.error.reqComp', ['vxe-context-menu']);
     }
-    var el = $xeTree.$refs.refElem;
-    if (useScrollbar) {
-      var viewInnerEl = $xeTree.$refs.refVirtualBody;
-      var scrollObserver = globalResize.create(function () {
-        $xeTree.updateScrollbar();
-      });
-      if (el) {
-        scrollObserver.observe(el);
-      }
-      if (viewInnerEl) {
-        scrollObserver.observe(viewInnerEl);
-      }
-      internalData.scrollObserver = scrollObserver;
-    }
     if (autoResize) {
+      var el = $xeTree.$refs.refElem;
       var parentEl = $xeTree.getParentElem();
       var resizeObserver = globalResize.create(function () {
         if (props.autoResize) {
-          $xeTree.reFlag++;
+          $xeTree.reLayoutFlag++;
         }
       });
       if (el) {
@@ -70554,9 +70631,10 @@ function tree_createInternalData() {
       }
       internalData.resizeObserver = resizeObserver;
     }
-    $xeTree.reFlag++;
+    $xeTree.reLayoutFlag++;
+    $xeTree.bindScrollbarResize();
     globalEvents.on($xeTree, 'resize', function () {
-      $xeTree.reFlag++;
+      $xeTree.reLayoutFlag++;
     });
   },
   beforeDestroy: function beforeDestroy() {