vxe-pc-ui 4.20.0 → 4.20.2

package/lib/index.umd.js

@@ -3072,6 +3072,7 @@ __webpack_require__.d(__webpack_exports__, {
   renderGlobalIcon: function() { return /* reexport */ renderGlobalIcon; },
   renderer: function() { return /* reexport */ renderer; },
   saveFile: function() { return /* reexport */ saveFile; },
+  scrollbarUtils: function() { return /* reexport */ scrollbarUtils; },
   setConfig: function() { return /* reexport */ setConfig; },
   setI18n: function() { return /* reexport */ setI18n; },
   setIcon: function() { return /* reexport */ setIcon; },
@@ -3328,6 +3329,7 @@ __webpack_require__.d(components_namespaceObject, {
   renderGlobalIcon: function() { return renderGlobalIcon; },
   renderer: function() { return renderer; },
   saveFile: function() { return saveFile; },
+  scrollbarUtils: function() { return scrollbarUtils; },
   setConfig: function() { return setConfig; },
   setI18n: function() { return setI18n; },
   setIcon: function() { return setIcon; },
@@ -3364,7 +3366,7 @@ if (typeof window !== 'undefined') {
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
 var es_array_push = __webpack_require__(4114);
 ;// ./node_modules/@vxe-ui/core/es/src/core.js
-const coreVersion = "4.4.27";
+const coreVersion = "4.4.31";
 const VxeCore = {
   coreVersion,
   uiVersion: '',
@@ -3992,7 +3994,7 @@ function createLog(type, name) {
     return msg;
   };
 }
-const version = "4.4.27";
+const version = "4.4.31";
 const log = {
   create: createLog,
   warn: createLog('warn', `v${version}`),
@@ -4452,6 +4454,12 @@ const baseUtils = {
    */
   isEmpty(value) {
     return value === null || value === undefined || value === '';
+  },
+  /**
+   * 获取配置值，如果存在则返回，如果不存在则使用默认值
+   */
+  getDefVal(value, defVal) {
+    return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(value) ? defVal : value;
   }
 };
 ;// ./node_modules/@vxe-ui/core/es/src/dom-utils.js
@@ -4467,7 +4475,7 @@ const domUtils = {
       for (let i = 0; i < staticClassNames.length; i++) {
         const val = staticClassNames[i];
         if (val) {
-          parts.push(val);
+          parts.push('' + val);
         }
       }
     }
@@ -4479,6 +4487,63 @@ const domUtils = {
     return parts.join(' ');
   }
 };
+;// ./node_modules/@vxe-ui/core/es/src/scrollbar-utils.js
+const scrollbarUtils = {
+  /**
+   * 计算滚动条滑块的长度
+   */
+  getThumbSize(viewportSize, contentSize, trackSize) {
+    if (contentSize <= viewportSize) {
+      return 0;
+    }
+    const ratio = viewportSize / contentSize;
+    const ideal = trackSize * ratio;
+    return Math.max(20, Math.min(ideal, trackSize));
+  },
+  /**
+   * 计算滚动条滑块的偏移位置
+   */
+  getThumbOffsetSize(offsetSize, viewportSize, contentSize, trackSize, thumbSize) {
+    const maxScroll = contentSize - viewportSize;
+    if (maxScroll <= 0) {
+      return 0;
+    }
+    const maxThumbOffset = trackSize - thumbSize;
+    if (maxThumbOffset <= 0) {
+      return 0;
+    }
+    const clamped = Math.min(Math.max(offsetSize, 0), maxScroll);
+    const ratio = clamped / maxScroll;
+    return ratio * maxThumbOffset;
+  },
+  /**
+   * 根据点击轨道的位置，计算滑块的偏移位置
+   */
+  getScrollFromClick(clickPosition, viewportSize, contentSize, trackSize, thumbSize) {
+    const maxThumbOffset = trackSize - thumbSize;
+    const maxScroll = contentSize - viewportSize;
+    if (maxScroll <= 0 || maxThumbOffset <= 0) {
+      return 0;
+    }
+    let thumbOffset = clickPosition - thumbSize / 2;
+    thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
+    const scrollOffset = thumbOffset / maxThumbOffset * maxScroll;
+    return scrollOffset;
+  },
+  /**
+   * 拖拽 thumb 时，根据鼠标位置计算滑块的偏移位置
+   */
+  getScrollFromDrag(pointerPosition, dragOffset, viewportSize, contentSize, trackSize, thumbSize) {
+    const maxScroll = contentSize - viewportSize;
+    const maxThumbOffset = trackSize - thumbSize;
+    if (maxScroll <= 0 || maxThumbOffset <= 0) {
+      return 0;
+    }
+    let thumbOffset = pointerPosition - dragOffset;
+    thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
+    return thumbOffset / maxThumbOffset * maxScroll;
+  }
+};
 ;// ./node_modules/@vxe-ui/core/es/src/hooks.js
 
 const hooks = new store();
@@ -4532,6 +4597,7 @@ const useFns = {
 
 
 
+
 
 
 const installedPlugins = [];
@@ -4604,6 +4670,7 @@ const VxeUI = Object.assign(VxeCore, {
   permission: permission,
   baseUtils: baseUtils,
   domUtils: domUtils,
+  scrollbarUtils: scrollbarUtils,
   globalStore: globalStore,
   hooks: hooks,
   component,
@@ -4635,6 +4702,7 @@ setTheme();
 
 
 
+
 
 
 /* harmony default export */ var es_index_esm = ((/* unused pure expression or super */ null && (VxeUI)));
@@ -4745,7 +4813,7 @@ function checkDynamic() {
 const {
   log: log_log
 } = VxeUI;
-const uiVersion = `ui v${"4.20.0"}`;
+const uiVersion = `ui v${"4.20.2"}`;
 function createComponentLog(name) {
   const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
   const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -4763,7 +4831,7 @@ const errLog = log_log.create('error', uiVersion);
 
 
 
-const ui_version = "4.20.0";
+const ui_version = "4.20.2";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -7467,6 +7535,9 @@ function enModelValue(nodeid) {
 function deModelValue(nodeid) {
   return nodeid ? decodeURIComponent(`${nodeid}`) : nodeid;
 }
+function getDefaultConfig(val1, def1) {
+  return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(val1) ? def1 : val1;
+}
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.filter.js
 var es_iterator_filter = __webpack_require__(2489);
 ;// ./packages/tooltip/src/tooltip.ts
@@ -11695,6 +11766,7 @@ function getScrollFromDrag(pointerPosition, dragOffset, viewportSize, contentSiz
 
 
 
+
 const {
   getConfig: scrollbar_getConfig,
   createEvent: scrollbar_createEvent,
@@ -11724,6 +11796,7 @@ function scrollbar_createInternalData() {
   name: 'VxeScrollbar',
   props: {
     id: [String, Number],
+    viewId: [String, Number],
     width: [String, Number],
     height: [String, Number],
     minWidth: [String, Number],
@@ -11739,6 +11812,14 @@ function scrollbar_createInternalData() {
       type: Boolean,
       default: () => scrollbar_getConfig().scrollbar.padding
     },
+    autoHide: {
+      type: Boolean,
+      default: () => scrollbar_getConfig().scrollbar.autoHide
+    },
+    visible: {
+      type: Boolean,
+      default: () => scrollbar_getConfig().scrollbar.visible
+    },
     xConfig: Object,
     yConfig: Object,
     className: {
@@ -11788,8 +11869,8 @@ function scrollbar_createInternalData() {
         maxWidth,
         maxHeight
       } = props;
-      const xOpts = computeXOpts.value;
-      const yOpts = computeYOpts.value;
+      const barWidth = computeYWidth.value;
+      const barHeight = computeXHeight.value;
       const stys = {};
       if (width) {
         stys.width = toCssUnit(width);
@@ -11809,14 +11890,48 @@ function scrollbar_createInternalData() {
       if (maxHeight) {
         stys.maxHeight = toCssUnit(maxHeight);
       }
-      if (yOpts.width) {
-        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(yOpts.width);
-      }
-      if (xOpts.height) {
-        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(xOpts.height);
+      if (barWidth || barHeight) {
+        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight);
+        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth);
       }
       return stys;
     });
+    const computeXHeight = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const xOpts = computeXOpts.value;
+      return xOpts.height;
+    });
+    const computeYWidth = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const yOpts = computeYOpts.value;
+      return yOpts.width;
+    });
+    const computeXVisible = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        visible
+      } = props;
+      const xOpts = computeXOpts.value;
+      return getDefaultConfig(xOpts.visible, visible);
+    });
+    const computeYVisible = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        visible
+      } = props;
+      const yOpts = computeYOpts.value;
+      return getDefaultConfig(yOpts.visible, visible);
+    });
+    const computeXAutoHide = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        autoHide
+      } = props;
+      const xOpts = computeXOpts.value;
+      return getDefaultConfig(xOpts.autoHide, autoHide);
+    });
+    const computeYAutoHide = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        autoHide
+      } = props;
+      const yOpts = computeYOpts.value;
+      return getDefaultConfig(yOpts.autoHide, autoHide);
+    });
     const computeWrapperClss = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         native,
@@ -11827,14 +11942,16 @@ function scrollbar_createInternalData() {
         yThumbHeight,
         xThumbWidth
       } = reactData;
-      const xOpts = computeXOpts.value;
-      const yOpts = computeYOpts.value;
       const xToTop = computeXToTop.value;
       const yToLeft = computeYToLeft.value;
-      return scrollbar_domUtils.buildClass(['vxe-scrollbar', `ov-x--${xOpts.visible || 'visible'}`, `ov-y--${yOpts.visible || 'visible'}`, `sx-pos--${xToTop ? 'top' : 'bottom'}`, `sy-pos--${yToLeft ? 'left' : 'right'}`, native ? 'is--native' : 'is--virtual', className], {
+      const xVisible = computeXVisible.value;
+      const yVisible = computeYVisible.value;
+      const xAutoHide = computeXAutoHide.value;
+      const yAutoHide = computeYAutoHide.value;
+      return scrollbar_domUtils.buildClass(['vxe-scrollbar', `ov-x--${xVisible === false ? 'hidden' : 'visible'}`, `ov-y--${yVisible === false ? 'hidden' : 'visible'}`, `sx-pos--${xToTop ? 'top' : 'bottom'}`, `sy-pos--${yToLeft ? 'left' : 'right'}`, native ? 'is--native' : 'is--virtual', className], {
         'is--padding': padding,
-        'ov-x--auto-hide': xOpts.autoHide,
-        'ov-y--auto-hide': yOpts.autoHide,
+        'ov-x--auto-hide': xAutoHide,
+        'ov-y--auto-hide': yAutoHide,
         'overflow-y': yThumbHeight,
         'overflow-x': xThumbWidth
       });
@@ -12209,14 +12326,15 @@ function scrollbar_createInternalData() {
         id,
         native,
         loading,
+        viewId,
         viewAttrs
       } = props;
       const wrapperStyle = computeWrapperStyle.value;
       const wrapperClss = computeWrapperClss.value;
       const viewClss = computeViewClss.value;
       const viewInnerClss = computeViewInnerClss.value;
-      const xOpts = computeXOpts.value;
-      const yOpts = computeYOpts.value;
+      const xVisible = computeXVisible.value;
+      const yVisible = computeYVisible.value;
       const defaultSlot = slots.default;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
@@ -12227,12 +12345,13 @@ function scrollbar_createInternalData() {
         ref: refViewElem,
         class: viewClss,
         onScroll: scrollEvent,
+        id: viewId || null,
         ...viewAttrs
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         key: 'vi',
         ref: refViewInnerElem,
         class: viewInnerClss
-      }, defaultSlot ? defaultSlot({}) : [])]), native || xOpts.visible === 'hidden' ? scrollbar_renderEmptyElement($xeScrollbar) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      }, defaultSlot ? defaultSlot({}) : [])]), native || xVisible === false ? scrollbar_renderEmptyElement($xeScrollbar) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refTrackXElem,
         class: 'vxe-scrollbar--track-x',
         onClick: clickTrackXEvent
@@ -12244,7 +12363,7 @@ function scrollbar_createInternalData() {
         onPointerup: cleatPointerThumbEvent,
         onPointercancel: cleatPointerThumbEvent,
         onLostpointercapture: cleatPointerThumbEvent
-      })]), native || yOpts.visible === 'hidden' ? scrollbar_renderEmptyElement($xeScrollbar) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      })]), native || yVisible === false ? scrollbar_renderEmptyElement($xeScrollbar) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refTrackYElem,
         class: 'vxe-scrollbar--track-y',
         onClick: clickTrackYEvent
@@ -12286,6 +12405,22 @@ function scrollbar_createInternalData() {
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.syncResize, () => {
       reFlag.value++;
     });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeYWidth, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeXHeight, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeXVisible, () => {
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        reFlag.value++;
+      });
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeYVisible, () => {
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        reFlag.value++;
+      });
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(reFlag, () => {
       $xeScrollbar.recalculate().then(() => {
         $xeScrollbar.recalculate();
@@ -12354,6 +12489,7 @@ const Scrollbar = VxeScrollbar;
 
 
 
+
 /* harmony default export */ var card = (defineVxeComponent({
   name: 'VxeCard',
   props: {
@@ -12383,7 +12519,7 @@ const Scrollbar = VxeScrollbar;
     },
     useScrollbar: {
       type: Boolean,
-      default: () => getConfig().card.useScrollbar
+      default: () => getDefaultConfig(getConfig().card.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object
   },
@@ -12419,6 +12555,19 @@ const Scrollbar = VxeScrollbar;
     const computeScrollbarOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, getConfig().card.scrollbarConfig, props.scrollbarConfig);
     });
+    const computeScrollbarProps = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      return {
+        width: scrollbarOpts.width,
+        height: scrollbarOpts.height,
+        autoHide: scrollbarOpts.autoHide,
+        visible: scrollbarOpts.visible,
+        xConfig: scrollbarOpts.xConfig,
+        yConfig: scrollbarOpts.yConfig,
+        className: scrollbarOpts.className,
+        viewAttrs: scrollbarOpts.viewAttrs
+      };
+    });
     const computeMaps = {
       computeSize
     };
@@ -12460,6 +12609,7 @@ const Scrollbar = VxeScrollbar;
       const vSize = computeSize.value;
       const cardStyle = computeCardStyle.value;
       const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarProps = computeScrollbarProps.value;
       const {
         viewClassName,
         viewInnerClassName
@@ -12485,7 +12635,7 @@ const Scrollbar = VxeScrollbar;
         class: 'vxe-card--body'
       }, [leftSlot ? useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
         class: 'vxe-card--body-scrollbar-left',
-        ...scrollbarOpts,
+        ...scrollbarProps,
         viewClassName: 'vxe-card--body-scrollbar-left-view',
         viewInnerClassName: 'vxe-card--body-scrollbar-left-inner'
       }, {
@@ -12494,7 +12644,7 @@ const Scrollbar = VxeScrollbar;
         class: 'vxe-card--body-left'
       }, vn_getSlotVNs(leftSlot({}))) : renderEmptyElement($xeCard), useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
         class: 'vxe-card--body-scrollbar-content',
-        ...scrollbarOpts,
+        ...scrollbarProps,
         viewClassName: 'vxe-card--body-scrollbar-content-view' + (viewClassName ? ' ' + viewClassName : ''),
         viewInnerClassName: 'vxe-card--body-scrollbar-content-inner' + (viewClassName ? ' ' + viewInnerClassName : '')
       }, {
@@ -12503,7 +12653,7 @@ const Scrollbar = VxeScrollbar;
         class: 'vxe-card--body-content'
       }, defaultSlot ? vn_getSlotVNs(defaultSlot({})) : []), rightSlot ? useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
         class: 'vxe-card--body-scrollbar-right',
-        ...scrollbarOpts,
+        ...scrollbarProps,
         viewClassName: 'vxe-card--body-scrollbar-right-view',
         viewInnerClassName: 'vxe-card--body-scrollbar-right-inner'
       }, {
@@ -13209,8 +13359,9 @@ function list_createInternalData() {
     afterList: [],
     fullKeyMaps: {},
     rowMaps: {},
-    // 滚动条
     // resizeObserver: undefined,
+    // 滚动条
+    // scrollObserver: undefined,
     // isThumbDrag: false,
     thumbDragOffset: 0,
     yThumbTop: 0,
@@ -13273,7 +13424,7 @@ let crossListDragRowObj = null;
     scrollY: Object,
     useScrollbar: {
       type: Boolean,
-      default: () => getConfig().list.useScrollbar
+      default: () => getDefaultConfig(getConfig().list.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object
   },
@@ -13296,7 +13447,6 @@ let crossListDragRowObj = null;
     const refFooterElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refVirtualWrapper = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refVirtualBody = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const refViewInnerElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refTrackXElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refTrackYElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refThumbXElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
@@ -13359,17 +13509,15 @@ let crossListDragRowObj = null;
     });
     const computeWrapperStyles = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const rowHeight = computeRowHeight.value;
-      const scrollbarXOpts = computeScrollbarXOpts.value;
-      const scrollbarYOpts = computeScrollbarYOpts.value;
+      const barWidth = computeScrollYWidth.value;
+      const barHeight = computeScrollXHeight.value;
       const stys = {};
       if (rowHeight) {
         stys['--vxe-ui-list-row-height'] = toCssUnit(rowHeight);
       }
-      if (scrollbarYOpts.width) {
-        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(scrollbarYOpts.width);
-      }
-      if (scrollbarXOpts.height) {
-        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(scrollbarXOpts.height);
+      if (barWidth || barHeight) {
+        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight);
+        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth);
       }
       return stys;
     });
@@ -13404,23 +13552,46 @@ let crossListDragRowObj = null;
       const scrollbarOpts = computeScrollbarOpts.value;
       return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
     });
-    const computeScrollbarWrapperClss = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+    const computeScrollXHeight = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
-      const {
-        padding
-      } = scrollbarOpts;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+    });
+    const computeScrollYWidth = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+    });
+    const computeScrollXVisible = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
+    });
+    const computeScrollYVisible = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible);
+    });
+    const computeScrollXAutoHide = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+    });
+    const computeScrollYAutoHide = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+    });
+    const computeScrollbarWrapperClss = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         yThumbHeight,
         xThumbWidth
       } = reactData;
-      const scrollbarXOpts = computeScrollbarXOpts.value;
-      const scrollbarYOpts = computeScrollbarYOpts.value;
       const scrollbarXToTop = computeScrollbarXToTop.value;
       const scrollbarYToLeft = computeScrollbarYToLeft.value;
-      return domUtils.buildClass(['vxe-scrollbar is--virtual', `ov-x--${scrollbarXOpts.visible || 'visible'}`, `ov-y--${scrollbarYOpts.visible || 'visible'}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`], {
-        'is--padding': padding,
-        'ov-x--auto-hide': scrollbarXOpts.autoHide,
-        'ov-y--auto-hide': scrollbarYOpts.autoHide,
+      const scrollXVisible = computeScrollXVisible.value;
+      const scrollYVisible = computeScrollYVisible.value;
+      return domUtils.buildClass(['vxe-scrollbar is--virtual', `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`, `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`], {
         'overflow-y': yThumbHeight,
         'overflow-x': xThumbWidth
       });
@@ -13448,6 +13619,10 @@ let crossListDragRowObj = null;
       const keyField = computeKeyField.value;
       return getRowIdByField(row, keyField);
     };
+    const getParentElem = () => {
+      const el = refElem.value;
+      return el ? el.parentElement : null;
+    };
     const calcTableHeight = key => {
       const {
         parentHeight
@@ -15604,7 +15779,9 @@ let crossListDragRowObj = null;
         topSpaceHeight,
         rowList,
         isAllChecked,
-        isAllIndeterminate
+        isAllIndeterminate,
+        xThumbWidth,
+        yThumbHeight
       } = reactData;
       const defaultSlot = slots.default;
       const headerSlot = slots.header;
@@ -15629,8 +15806,13 @@ let crossListDragRowObj = null;
         padding
       } = rowOpts;
       const isDrag = computeIsDrag.value;
-      const scrollbarXOpts = computeScrollbarXOpts.value;
-      const scrollbarYOpts = computeScrollbarYOpts.value;
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollXVisible = computeScrollXVisible.value;
+      const scrollYVisible = computeScrollYVisible.value;
+      const scrollbarXToTop = computeScrollbarXToTop.value;
+      const scrollbarYToLeft = computeScrollbarYToLeft.value;
+      const scrollXAutoHide = computeScrollXAutoHide.value;
+      const scrollYAutoHide = computeScrollYAutoHide.value;
       const scrollbarWrapperClss = computeScrollbarWrapperClss.value;
       const showDefChekboxHead = showCheckbox && showHeader !== false;
       const leOns = {};
@@ -15639,13 +15821,16 @@ let crossListDragRowObj = null;
       }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
-        class: ['vxe-list', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
+        class: ['vxe-list', useScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '', useScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '', useScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '', useScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
           $list: $xeList
         }) : className : '', {
           [`size--${vSize}`]: vSize,
           'is--virtual-scrollbar': useScrollbar,
-          'ov-x--auto-hide': useScrollbar && scrollbarXOpts.autoHide,
-          'ov-y--auto-hide': useScrollbar && scrollbarYOpts.autoHide,
+          '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
         }],
@@ -15693,17 +15878,10 @@ let crossListDragRowObj = null;
         style: {
           marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ''
         }
-      }, useScrollbar ? defaultSlot ? defaultSlot({
-        items: rowList,
-        $list: $xeList
-      }) : rowList.map((row, i) => renderRow(row, i)) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        key: 'vi',
-        ref: refViewInnerElem,
-        class: 'vxe-scrollbar--view-inner'
       }, defaultSlot ? defaultSlot({
         items: rowList,
         $list: $xeList
-      }) : rowList.map((row, i) => renderRow(row, i)))])]), footerSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      }) : rowList.map((row, i) => renderRow(row, i)))]), footerSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refFooterElem,
         class: 'vxe-list--footer-wrapper'
       }, footerSlot({
@@ -15715,7 +15893,7 @@ let crossListDragRowObj = null;
        */
       useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: scrollbarWrapperClss
-      }, [scrollbarXOpts.visible === 'hidden' ? renderEmptyElement($xeList) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      }, [scrollXVisible === false ? renderEmptyElement($xeList) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refTrackXElem,
         class: 'vxe-scrollbar--track-x',
         onClick: clickTrackXEvent
@@ -15727,7 +15905,7 @@ let crossListDragRowObj = null;
         onPointerup: cleatPointerThumbEvent,
         onPointercancel: cleatPointerThumbEvent,
         onLostpointercapture: cleatPointerThumbEvent
-      })]), scrollbarYOpts.visible === 'hidden' ? renderEmptyElement($xeList) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      })]), scrollYVisible === false ? renderEmptyElement($xeList) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refTrackYElem,
         class: 'vxe-scrollbar--track-y',
         onClick: clickTrackYEvent
@@ -15772,11 +15950,30 @@ let crossListDragRowObj = null;
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.syncResize, () => {
       reFlag.value++;
     });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.useScrollbar, () => {
+      reFlag.value++;
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeRowHeight, () => {
       reFlag.value++;
     });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(reFlag, () => {
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollYWidth, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollXHeight, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollXVisible, () => {
       (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        reFlag.value++;
+      });
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollYVisible, () => {
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        reFlag.value++;
+      });
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(reFlag, () => {
+      recalculate().then(() => {
         recalculate();
       });
     });
@@ -15832,20 +16029,32 @@ let crossListDragRowObj = null;
       if (useKey && !keyField) {
         list_errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
       }
-      if (useScrollbar || autoResize) {
-        const el = refElem.value;
-        const viewInnerEl = refViewInnerElem.value;
-        const resizeObserver = globalResize.create(() => {
+      const el = refElem.value;
+      if (useScrollbar) {
+        const viewInnerEl = refVirtualBody.value;
+        const scrollObserver = globalResize.create(() => {
           reFlag.value++;
         });
-        resizeObserver.observe(el);
-        if (autoResize) {
-          if (el) {
-            resizeObserver.observe(el.parentElement);
-          }
+        if (el) {
+          scrollObserver.observe(el);
         }
         if (viewInnerEl) {
-          resizeObserver.observe(viewInnerEl);
+          scrollObserver.observe(viewInnerEl);
+        }
+        internalData.scrollObserver = scrollObserver;
+      }
+      if (autoResize) {
+        const parentEl = getParentElem();
+        const resizeObserver = globalResize.create(() => {
+          if (props.autoResize) {
+            reFlag.value++;
+          }
+        });
+        if (el) {
+          resizeObserver.observe(el);
+        }
+        if (parentEl) {
+          resizeObserver.observe(parentEl);
         }
         internalData.resizeObserver = resizeObserver;
       }
@@ -15856,11 +16065,15 @@ let crossListDragRowObj = null;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
       const {
+        scrollObserver,
         resizeObserver
       } = internalData;
       if (resizeObserver) {
         resizeObserver.disconnect();
       }
+      if (scrollObserver) {
+        scrollObserver.disconnect();
+      }
       globalEvents.off($xeList, 'resize');
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(reactData, list_createReactData());
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(internalData, list_createInternalData());
@@ -31864,6 +32077,7 @@ const allActiveDrawers = [];
 
 
 
+
 /* harmony default export */ var drawer = (defineVxeComponent({
   name: 'VxeDrawer',
   props: {
@@ -31996,7 +32210,12 @@ const allActiveDrawers = [];
       default: () => getConfig().drawer.size || getConfig().size
     },
     beforeHideMethod: Function,
-    slots: Object
+    slots: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: () => getDefaultConfig(getConfig().drawer.useScrollbar, getConfig().useScrollbar)
+    },
+    scrollbarConfig: Object
   },
   emits: ['update:modelValue', 'show', 'hide', 'before-hide', 'close', 'confirm', 'cancel', 'resize'],
   setup(props, context) {
@@ -32055,6 +32274,28 @@ const allActiveDrawers = [];
       }
       return 'wl';
     });
+    const computeScrollbarOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, getConfig().modal.scrollbarConfig, props.scrollbarConfig);
+    });
+    const computeScrollbarProps = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const {
+        viewClassName,
+        viewInnerClassName
+      } = scrollbarOpts;
+      return {
+        width: scrollbarOpts.width,
+        height: scrollbarOpts.height,
+        autoHide: scrollbarOpts.autoHide,
+        visible: scrollbarOpts.visible,
+        xConfig: scrollbarOpts.xConfig,
+        yConfig: scrollbarOpts.yConfig,
+        className: scrollbarOpts.className,
+        viewAttrs: scrollbarOpts.viewAttrs,
+        viewClassName: 'vxe-drawer--scrollbar-content-view' + (viewClassName ? ' ' + viewClassName : ''),
+        viewInnerClassName: 'vxe-drawer--scrollbar-content-inner' + (viewClassName ? ' ' + viewInnerClassName : '')
+      };
+    });
     const computeMaps = {};
     const $xeDrawer = {
       xID,
@@ -32398,11 +32639,47 @@ const allActiveDrawers = [];
       const {
         slots: propSlots = {},
         content,
+        useScrollbar,
         useHtml
       } = props;
+      const scrollbarProps = computeScrollbarProps.value;
       const defaultSlot = slots.default || propSlots.default;
       const leftSlot = slots.left || propSlots.left;
       const rightSlot = slots.right || propSlots.right;
+      const contVNs = [];
+      if (useHtml && !defaultSlot) {
+        contVNs.push(useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
+          key: 'shc',
+          class: 'vxe-drawer--scrollbar-content',
+          ...scrollbarProps
+        }, {
+          default() {
+            return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+              class: 'vxe-drawer--scrollbar-content-html',
+              innerHTML: getFuncText(content)
+            })];
+          }
+        }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          key: 'hc',
+          class: 'vxe-drawer--content',
+          innerHTML: getFuncText(content)
+        }));
+      } else {
+        contVNs.push(useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
+          key: 'sdc',
+          class: 'vxe-drawer--scrollbar-content',
+          ...scrollbarProps
+        }, {
+          default: () => defaultSlot ? vn_getSlotVNs(defaultSlot({
+            $drawer: $xeDrawer
+          })) : getFuncText(content)
+        }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          key: 'dc',
+          class: 'vxe-drawer--content'
+        }, defaultSlot ? vn_getSlotVNs(defaultSlot({
+          $drawer: $xeDrawer
+        })) : getFuncText(content)));
+      }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-drawer--body'
       }, [leftSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
@@ -32411,16 +32688,7 @@ const allActiveDrawers = [];
         $drawer: $xeDrawer
       }))) : renderEmptyElement($xeDrawer), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-drawer--body-default'
-      }, [useHtml && !defaultSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        key: 'hc',
-        class: 'vxe-drawer--content',
-        innerHTML: getFuncText(content)
-      }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        key: 'dc',
-        class: 'vxe-drawer--content'
-      }, defaultSlot ? vn_getSlotVNs(defaultSlot({
-        $drawer: $xeDrawer
-      })) : getFuncText(content))]), rightSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      }, contVNs), rightSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-drawer--body-right'
       }, vn_getSlotVNs(rightSlot({
         $drawer: $xeDrawer
@@ -37651,6 +37919,7 @@ const ImagePreview = VxeImagePreview;
 
 
 
+
 /* harmony default export */ var layout_aside = (defineVxeComponent({
   name: 'VxeLayoutAside',
   props: {
@@ -37662,7 +37931,7 @@ const ImagePreview = VxeImagePreview;
     collapseConfig: Object,
     useScrollbar: {
       type: Boolean,
-      default: () => getConfig().layoutAside.useScrollbar
+      default: () => getDefaultConfig(getConfig().layoutAside.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object,
     size: {
@@ -37739,10 +38008,7 @@ const ImagePreview = VxeImagePreview;
       const collapseOpts = computeCollapseOpts.value;
       const scrollbarOpts = computeScrollbarOpts.value;
       const {
-        native,
-        yConfig,
         className,
-        viewAttrs,
         viewClassName,
         viewInnerClassName
       } = scrollbarOpts;
@@ -37758,13 +38024,16 @@ const ImagePreview = VxeImagePreview;
         }],
         style: varStyle
       }, [useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
-        native,
+        width: scrollbarOpts.width,
+        height: scrollbarOpts.height,
+        autoHide: scrollbarOpts.autoHide,
+        visible: scrollbarOpts.visible,
         xConfig: {
-          visible: 'hidden'
+          visible: false
         },
-        yConfig,
+        yConfig: scrollbarOpts.yConfig,
         className: 'vxe-layout-aside--scrollbar' + (className ? ' ' + className : ''),
-        viewAttrs,
+        viewAttrs: scrollbarOpts.viewAttrs,
         viewClassName: 'vxe-layout-aside--scrollbar-view' + (viewClassName ? ' ' + viewClassName : ''),
         viewInnerClassName: 'vxe-layout-aside--scrollbar-inner' + (viewInnerClassName ? ' ' + viewInnerClassName : '')
       }, {
@@ -37809,6 +38078,7 @@ const LayoutAside = VxeLayoutAside;
 
 
 
+
 function layout_body_createInternalData() {
   return {};
 }
@@ -37827,7 +38097,7 @@ function layout_body_createReactData() {
     backtopConfig: Object,
     useScrollbar: {
       type: Boolean,
-      default: () => getConfig().layoutBody.useScrollbar
+      default: () => getDefaultConfig(getConfig().layoutBody.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object,
     size: {
@@ -37860,6 +38130,32 @@ function layout_body_createReactData() {
     const computeScrollbarOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, getConfig().layoutBody.scrollbarConfig, props.scrollbarConfig);
     });
+    const computeScrollbarProps = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        showBacktop
+      } = props;
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const {
+        className,
+        viewClassName,
+        viewInnerClassName
+      } = scrollbarOpts;
+      return {
+        width: scrollbarOpts.width,
+        height: scrollbarOpts.height,
+        autoHide: scrollbarOpts.autoHide,
+        visible: scrollbarOpts.visible,
+        xConfig: scrollbarOpts.xConfig,
+        yConfig: scrollbarOpts.yConfig,
+        className: 'vxe-layout-body--scrollbar' + (className ? ' ' + className : ''),
+        viewAttrs: {
+          ...scrollbarOpts.viewAttrs,
+          id: showBacktop ? backtopId || null : null
+        },
+        viewClassName: 'vxe-layout-body--scrollbar-view' + (viewClassName ? ' ' + viewClassName : ''),
+        viewInnerClassName: 'vxe-layout-body--scrollbar-inner' + (viewInnerClassName ? ' ' + viewInnerClassName : '')
+      };
+    });
     const computeMaps = {
       computeSize
     };
@@ -37890,16 +38186,7 @@ function layout_body_createReactData() {
         useScrollbar
       } = props;
       const backtopOpts = computeBacktopOpts.value;
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const {
-        native,
-        xConfig,
-        yConfig,
-        className,
-        viewAttrs,
-        viewClassName,
-        viewInnerClassName
-      } = scrollbarOpts;
+      const scrollbarProps = computeScrollbarProps.value;
       const vSize = computeSize.value;
       const defaultSlot = slots.default;
       const backtopSlot = slots.backtop;
@@ -37922,18 +38209,7 @@ function layout_body_createReactData() {
           'is--loading': loading,
           'is--padding': padding
         }]
-      }, [useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
-        native,
-        xConfig,
-        yConfig,
-        className: 'vxe-layout-body--scrollbar' + (className ? ' ' + className : ''),
-        viewAttrs: {
-          ...viewAttrs,
-          id: showBacktop ? backtopId || null : null
-        },
-        viewClassName: 'vxe-layout-body--scrollbar-view' + (viewClassName ? ' ' + viewClassName : ''),
-        viewInnerClassName: 'vxe-layout-body--scrollbar-inner' + (viewInnerClassName ? ' ' + viewInnerClassName : '')
-      }, {
+      }, [useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, scrollbarProps, {
         default: () => defaultSlot ? defaultSlot({}) : []
       }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         id: showBacktop ? backtopId : '',
@@ -38439,7 +38715,7 @@ let nemuUniqueKey = 100000000;
     menuConfig: Object,
     useScrollbar: {
       type: Boolean,
-      default: () => menu_getConfig().menu.useScrollbar
+      default: () => getDefaultConfig(menu_getConfig().menu.useScrollbar, menu_getConfig().useScrollbar)
     },
     scrollbarConfig: Object,
     appendTo: {
@@ -39258,6 +39534,7 @@ const allActiveModals = [];
 
 
 
+
 const {
   warnLog: modal_warnLog,
   errLog: modal_errLog
@@ -39466,6 +39743,11 @@ const lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
     },
     beforeHideMethod: Function,
     slots: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: () => getDefaultConfig(getConfig().modal.useScrollbar, getConfig().useScrollbar)
+    },
+    scrollbarConfig: Object,
     /**
      * 已废弃
      * @deprecated
@@ -39537,6 +39819,28 @@ const lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
     const computeZoomOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, getConfig().modal.zoomConfig, props.zoomConfig);
     });
+    const computeScrollbarOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, getConfig().modal.scrollbarConfig, props.scrollbarConfig);
+    });
+    const computeScrollbarProps = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const {
+        viewClassName,
+        viewInnerClassName
+      } = scrollbarOpts;
+      return {
+        width: scrollbarOpts.width,
+        height: scrollbarOpts.height,
+        autoHide: scrollbarOpts.autoHide,
+        visible: scrollbarOpts.visible,
+        xConfig: scrollbarOpts.xConfig,
+        yConfig: scrollbarOpts.yConfig,
+        className: scrollbarOpts.className,
+        viewAttrs: scrollbarOpts.viewAttrs,
+        viewClassName: 'vxe-modal--scrollbar-content-view' + (viewClassName ? ' ' + viewClassName : ''),
+        viewInnerClassName: 'vxe-modal--scrollbar-content-inner' + (viewClassName ? ' ' + viewInnerClassName : '')
+      };
+    });
     const computeMaps = {
       computeSize,
       computeZoomOpts
@@ -40658,10 +40962,12 @@ const lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
         status,
         message,
         iconStatus,
+        useScrollbar,
         useHtml
       } = props;
       const content = props.content || message;
       const isMsg = computeIsMsg.value;
+      const scrollbarProps = computeScrollbarProps.value;
       const defaultSlot = slots.default || propSlots.default;
       const leftSlot = slots.left || propSlots.left;
       const rightSlot = slots.right || propSlots.right;
@@ -40673,16 +40979,39 @@ const lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
           class: ['vxe-modal--status-icon', iconStatus || getIcon()[`MODAL_${status}`.toLocaleUpperCase()]]
         })]));
       }
-      contVNs.push(useHtml && !defaultSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        key: 'hc',
-        class: 'vxe-modal--content',
-        innerHTML: getFuncText(content)
-      }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        key: 'dc',
-        class: 'vxe-modal--content'
-      }, defaultSlot ? vn_getSlotVNs(defaultSlot({
-        $modal: $xeModal
-      })) : getFuncText(content)));
+      if (useHtml && !defaultSlot) {
+        contVNs.push(useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
+          key: 'shc',
+          class: 'vxe-modal--scrollbar-content',
+          ...scrollbarProps
+        }, {
+          default() {
+            return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+              class: 'vxe-modal--scrollbar-content-html',
+              innerHTML: getFuncText(content)
+            })];
+          }
+        }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          key: 'hc',
+          class: 'vxe-modal--content',
+          innerHTML: getFuncText(content)
+        }));
+      } else {
+        contVNs.push(useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
+          key: 'sdc',
+          class: 'vxe-modal--scrollbar-content',
+          ...scrollbarProps
+        }, {
+          default: () => defaultSlot ? vn_getSlotVNs(defaultSlot({
+            $modal: $xeModal
+          })) : getFuncText(content)
+        }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          key: 'dc',
+          class: 'vxe-modal--content'
+        }, defaultSlot ? vn_getSlotVNs(defaultSlot({
+          $modal: $xeModal
+        })) : getFuncText(content)));
+      }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-modal--body'
       }, [leftSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
@@ -50511,7 +50840,7 @@ const scrollbarOffsetSize = 20;
     },
     useScrollbar: {
       type: Boolean,
-      default: () => getConfig().tabs.useScrollbar
+      default: () => getDefaultConfig(getConfig().tabs.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object,
     // 已废弃
@@ -50622,6 +50951,25 @@ const scrollbarOffsetSize = 20;
     const computeScrollbarOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, getConfig().tabs.scrollbarConfig, props.scrollbarConfig);
     });
+    const computeScrollbarProps = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const {
+        viewClassName,
+        viewInnerClassName
+      } = scrollbarOpts;
+      return {
+        width: scrollbarOpts.width,
+        height: scrollbarOpts.height,
+        autoHide: scrollbarOpts.autoHide,
+        visible: scrollbarOpts.visible,
+        xConfig: scrollbarOpts.xConfig,
+        yConfig: scrollbarOpts.yConfig,
+        className: scrollbarOpts.className,
+        viewAttrs: scrollbarOpts.viewAttrs,
+        viewClassName: 'vxe-tabs-pane--scrollbar-item-view' + (viewClassName ? ' ' + viewClassName : ''),
+        viewInnerClassName: 'vxe-tabs-pane--scrollbar-item-inner' + (viewClassName ? ' ' + viewInnerClassName : '')
+      };
+    });
     const computeMaps = {};
     const $xeTabs = {
       xID,
@@ -51297,20 +51645,14 @@ const scrollbarOffsetSize = 20;
         slots
       } = item;
       const defaultSlot = slots ? slots.default : null;
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const {
-        viewClassName,
-        viewInnerClassName
-      } = scrollbarOpts;
+      const scrollbarProps = computeScrollbarProps.value;
       if (name && initNames.includes(name)) {
         return useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
           key: `${name}`,
           class: ['vxe-tabs-pane--scrollbar-item', {
             'is--visible': activeName === name
           }],
-          ...scrollbarOpts,
-          viewClassName: 'vxe-tabs-pane--scrollbar-item-view' + (viewClassName ? ' ' + viewClassName : ''),
-          viewInnerClassName: 'vxe-tabs-pane--scrollbar-item-inner' + (viewClassName ? ' ' + viewInnerClassName : '')
+          ...scrollbarProps
         }, {
           default: () => defaultSlot ? callSlot(defaultSlot, {
             name
@@ -52996,6 +53338,7 @@ function getCrossTreeDragNodeInfo() {
 
 
 
+
 const {
   warnLog: tree_warnLog,
   errLog: tree_errLog
@@ -53012,6 +53355,34 @@ const {
 function tree_getNodeUniqueId() {
   return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId('node_');
 }
+function tree_createReactData() {
+  return {
+    parentHeight: 0,
+    customHeight: 0,
+    customMinHeight: 0,
+    customMaxHeight: 0,
+    currentNode: null,
+    scrollYLoad: false,
+    bodyHeight: 0,
+    topSpaceHeight: 0,
+    selectRadioKey: null,
+    treeList: [],
+    updateExpandedFlag: 1,
+    updateCheckboxFlag: 1,
+    // 滚动条
+    yThumbHeight: 0,
+    xThumbWidth: 0,
+    insertNodeFlag: 1,
+    removeNodeFlag: 1,
+    dragNode: null,
+    dragTipText: '',
+    isCrossDragNode: false,
+    tooltipStore: {
+      visible: false,
+      node: null
+    }
+  };
+}
 function tree_createInternalData() {
   return {
     // initialized: false,
@@ -53024,8 +53395,15 @@ function tree_createInternalData() {
     indeterminateNodeMaps: {},
     treeExpandedMaps: {},
     treeExpandLazyLoadedMaps: {},
-    lastScrollLeft: 0,
+    // resizeObserver: undefined,
+    // 滚动条
+    // scrollObserver: undefined,
+    // isThumbDrag: false,
+    thumbDragOffset: 0,
+    yThumbTop: 0,
+    xThumbLeft: 0,
     lastScrollTop: 0,
+    lastScrollLeft: 0,
     scrollYStore: {
       startIndex: 0,
       endIndex: 0,
@@ -53042,31 +53420,6 @@ function tree_createInternalData() {
     // hpTimeout: undefined
   };
 }
-function tree_createReactData() {
-  return {
-    parentHeight: 0,
-    customHeight: 0,
-    customMinHeight: 0,
-    customMaxHeight: 0,
-    currentNode: null,
-    scrollYLoad: false,
-    bodyHeight: 0,
-    topSpaceHeight: 0,
-    selectRadioKey: null,
-    treeList: [],
-    updateExpandedFlag: 1,
-    updateCheckboxFlag: 1,
-    insertNodeFlag: 1,
-    removeNodeFlag: 1,
-    dragNode: null,
-    dragTipText: '',
-    isCrossDragNode: false,
-    tooltipStore: {
-      visible: false,
-      node: null
-    }
-  };
-}
 let crossTreeDragNodeObj = null;
 /* harmony default export */ var tree = (defineVxeComponent({
   name: 'VxeTree',
@@ -53197,7 +53550,12 @@ let crossTreeDragNodeObj = null;
       type: String,
       default: () => tree_getConfig().tree.size || tree_getConfig().size
     },
-    virtualYConfig: Object
+    virtualYConfig: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: () => getDefaultConfig(tree_getConfig().tree.useScrollbar, tree_getConfig().useScrollbar)
+    },
+    scrollbarConfig: Object
   },
   emits: ['update:modelValue', 'update:checkNodeKey', 'update:checkNodeKeys', 'node-click', 'node-dblclick', 'current-change', 'radio-change', 'checkbox-change', 'load-success', 'load-error', 'scroll', 'node-dragstart', 'node-dragover', 'node-dragend', 'node-remove-dragend', 'node-insert-dragend', 'node-expand', 'node-menu', 'menu-click'],
   setup(props, context) {
@@ -53214,6 +53572,10 @@ let crossTreeDragNodeObj = null;
     const refFooterWrapperElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refVirtualWrapper = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refVirtualBody = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refTrackXElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refTrackYElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refThumbXElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refThumbYElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refDragNodeLineElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refDragTipElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refTooltip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
@@ -53293,6 +53655,16 @@ let crossTreeDragNodeObj = null;
     const computeMenuOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, tree_getConfig().tree.menuConfig, props.menuConfig);
     });
+    const computeWrapperStyles = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const barWidth = computeScrollYWidth.value;
+      const barHeight = computeScrollXHeight.value;
+      const stys = {};
+      if (barWidth || barHeight) {
+        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight);
+        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth);
+      }
+      return stys;
+    });
     const computeTreeStyle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         indent
@@ -53336,6 +53708,71 @@ let crossTreeDragNodeObj = null;
     const computeFilterOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, tree_getConfig().tree.filterConfig, props.filterConfig);
     });
+    const computeScrollbarOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, tree_getConfig().tree.scrollbarConfig, props.scrollbarConfig);
+    });
+    const computeScrollbarXOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      return Object.assign({}, tree_getConfig().scrollbar.xConfig, scrollbarOpts.xConfig, {
+        visible: false
+      });
+    });
+    const computeScrollbarYOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      return Object.assign({}, tree_getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
+    });
+    const computeScrollXHeight = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), tree_getConfig().scrollbar.height);
+    });
+    const computeScrollYWidth = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), tree_getConfig().scrollbar.width);
+    });
+    const computeScrollXVisible = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
+    });
+    const computeScrollYVisible = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible);
+    });
+    const computeScrollXAutoHide = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), tree_getConfig().scrollbar.autoHide);
+    });
+    const computeScrollYAutoHide = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), tree_getConfig().scrollbar.autoHide);
+    });
+    const computeScrollbarWrapperClss = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        yThumbHeight,
+        xThumbWidth
+      } = reactData;
+      const scrollbarXToTop = computeScrollbarXToTop.value;
+      const scrollbarYToLeft = computeScrollbarYToLeft.value;
+      const scrollXVisible = computeScrollXVisible.value;
+      const scrollYVisible = computeScrollYVisible.value;
+      return domUtils.buildClass(['vxe-scrollbar is--virtual', `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`, `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`], {
+        'overflow-y': yThumbHeight,
+        'overflow-x': xThumbWidth
+      });
+    });
+    const computeScrollbarXToTop = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return scrollbarXOpts.position === 'top';
+    });
+    const computeScrollbarYToLeft = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return scrollbarYOpts.position === 'left';
+    });
     const computeMaps = {
       computeKeyField,
       computeParentField,
@@ -53932,6 +54369,10 @@ let crossTreeDragNodeObj = null;
         }
       });
     };
+    const updateScrollbar = () => {
+      updateThumbSize();
+      updateThumbOffset();
+    };
     /**
      * 重新计算列表
      */
@@ -53957,6 +54398,7 @@ let crossTreeDragNodeObj = null;
           const parentPaddingSize = getPaddingTopBottomSize(parentEl);
           reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight);
         }
+        updateScrollbar();
         updateHeight();
         return computeScrollLoad().then(() => {
           updateHeight();
@@ -53998,6 +54440,7 @@ let crossTreeDragNodeObj = null;
       const scrollLeft = scrollBodyElem.scrollLeft;
       const isX = scrollLeft !== internalData.lastScrollLeft;
       const isY = scrollTop !== internalData.lastScrollTop;
+      updateThumbOffset();
       internalData.lastScrollTop = scrollTop;
       internalData.lastScrollLeft = scrollLeft;
       if (reactData.scrollYLoad) {
@@ -54673,13 +55116,6 @@ let crossTreeDragNodeObj = null;
         checked: isChecked
       }, evnt);
     };
-    const handleGlobalResizeEvent = () => {
-      const el = refElem.value;
-      if (!el || !el.clientWidth) {
-        return;
-      }
-      recalculate();
-    };
     const insertTreeNode = (newRecords, isAppend) => {
       const {
         treeFullData,
@@ -56342,6 +56778,183 @@ let crossTreeDragNodeObj = null;
         hideDropTip();
       }
     };
+    const updateThumbSize = () => {
+      const viewEl = refVirtualWrapper.value;
+      if (!viewEl) {
+        return;
+      }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return;
+      }
+      const trackXEl = refTrackXElem.value;
+      const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+      const thumbXElem = refThumbXElem.value;
+      if (thumbXElem) {
+        thumbXElem.style.width = xThumbWidth + 'px';
+      }
+      reactData.xThumbWidth = xThumbWidth;
+      const trackYEl = refTrackYElem.value;
+      const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+      const thumbYElem = refThumbYElem.value;
+      if (thumbYElem) {
+        thumbYElem.style.height = yThumbHeight + 'px';
+      }
+      reactData.yThumbHeight = yThumbHeight;
+    };
+    const updateThumbOffset = () => {
+      const viewEl = refVirtualWrapper.value;
+      if (!viewEl) {
+        return;
+      }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return;
+      }
+      const {
+        xThumbWidth,
+        yThumbHeight
+      } = reactData;
+      const trackXEl = refTrackXElem.value;
+      const thumbXElem = refThumbXElem.value;
+      const 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(${xThumbLeft}px)`;
+      }
+      const trackYEl = refTrackYElem.value;
+      const thumbYElem = refThumbYElem.value;
+      const 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(${yThumbTop}px)`;
+      }
+    };
+    const clickTrackXEvent = evnt => {
+      const trackEl = evnt.currentTarget;
+      if (trackEl !== evnt.target) {
+        return;
+      }
+      const viewEl = refVirtualWrapper.value;
+      if (!viewEl) {
+        return;
+      }
+      const {
+        xThumbWidth
+      } = reactData;
+      const trackRect = trackEl.getBoundingClientRect();
+      viewEl.scrollTo({
+        left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
+        behavior: 'auto'
+      });
+    };
+    const clickTrackYEvent = evnt => {
+      const trackEl = evnt.currentTarget;
+      if (trackEl !== evnt.target) {
+        return;
+      }
+      const viewEl = refVirtualWrapper.value;
+      if (!viewEl) {
+        return;
+      }
+      const {
+        yThumbHeight
+      } = reactData;
+      const trackRect = trackEl.getBoundingClientRect();
+      viewEl.scrollTo({
+        top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
+        behavior: 'auto'
+      });
+    };
+    const pointerdownThumbXEvent = evnt => {
+      const thumbEl = evnt.currentTarget;
+      internalData.isThumbDrag = true;
+      thumbEl.setPointerCapture(evnt.pointerId);
+      const viewEl = refVirtualWrapper.value;
+      if (!viewEl) {
+        return;
+      }
+      const {
+        xThumbWidth
+      } = reactData;
+      const trackEl = thumbEl.parentElement;
+      const trackRect = trackEl.getBoundingClientRect();
+      const pointerPosition = evnt.clientX - trackRect.left;
+      // 记录 thumb 的偏移
+      const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    };
+    const pointermoveThumbXEvent = evnt => {
+      const thumbEl = evnt.currentTarget;
+      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+        return;
+      }
+      const {
+        isThumbDrag,
+        thumbDragOffset
+      } = internalData;
+      if (isThumbDrag) {
+        const viewEl = refVirtualWrapper.value;
+        if (!viewEl) {
+          return;
+        }
+        const {
+          xThumbWidth
+        } = reactData;
+        const thumbEl = evnt.currentTarget;
+        const trackEl = thumbEl.parentElement;
+        const trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      }
+    };
+    const cleatPointerThumbEvent = evnt => {
+      const thumbEl = evnt.currentTarget;
+      thumbEl.releasePointerCapture(evnt.pointerId);
+      internalData.isThumbDrag = false;
+    };
+    const pointerdownThumbYEvent = evnt => {
+      const thumbEl = evnt.currentTarget;
+      internalData.isThumbDrag = true;
+      thumbEl.setPointerCapture(evnt.pointerId);
+      const viewEl = refVirtualWrapper.value;
+      if (!viewEl) {
+        return;
+      }
+      const {
+        yThumbHeight
+      } = reactData;
+      const trackEl = thumbEl.parentElement;
+      const trackRect = trackEl.getBoundingClientRect();
+      const pointerPosition = evnt.clientY - trackRect.top;
+      // 记录 thumb 的偏移
+      const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    };
+    const pointermoveThumbYEvent = evnt => {
+      const thumbEl = evnt.currentTarget;
+      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+        return;
+      }
+      const {
+        isThumbDrag,
+        thumbDragOffset
+      } = internalData;
+      if (isThumbDrag) {
+        const viewEl = refVirtualWrapper.value;
+        if (!viewEl) {
+          return;
+        }
+        const {
+          yThumbHeight
+        } = reactData;
+        const thumbEl = evnt.currentTarget;
+        const trackEl = thumbEl.parentElement;
+        const trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      }
+    };
     Object.assign($xeTree, treeMethods, treePrivateMethods);
     const renderDragIcon = (node, nodeid) => {
       const {
@@ -56686,19 +57299,23 @@ let crossTreeDragNodeObj = null;
       const {
         loading,
         trigger,
-        showLine
+        showLine,
+        useScrollbar
       } = props;
       const {
         bodyHeight,
         topSpaceHeight,
         treeList,
-        tooltipStore
+        tooltipStore,
+        xThumbWidth,
+        yThumbHeight
       } = reactData;
       const vSize = computeSize.value;
       const radioOpts = computeRadioOpts.value;
       const checkboxOpts = computeCheckboxOpts.value;
       const loadingOpts = computeLoadingOpts.value;
       const isNodeHover = computeIsNodeHover.value;
+      const wrapperStyles = computeWrapperStyles.value;
       const treeStyle = computeTreeStyle.value;
       const dragOpts = computeDragOpts.value;
       const tooltipOpts = computeTooltipOpts.value;
@@ -56706,21 +57323,36 @@ let crossTreeDragNodeObj = null;
       const headerSlot = slots.header;
       const footerSlot = slots.footer;
       const tooltipSlot = slots.tooltip;
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollXVisible = computeScrollXVisible.value;
+      const scrollYVisible = computeScrollYVisible.value;
+      const scrollbarXToTop = computeScrollbarXToTop.value;
+      const scrollbarYToLeft = computeScrollbarYToLeft.value;
+      const scrollXAutoHide = computeScrollXAutoHide.value;
+      const scrollYAutoHide = computeScrollYAutoHide.value;
+      const scrollbarWrapperClss = computeScrollbarWrapperClss.value;
       const teOns = {};
       if (dragOpts.isCrossTreeDrag && !treeList.length) {
         teOns.onDragover = $xeTree.handleCrossTreeNodeDragoverEmptyEvent;
       }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
-        class: ['vxe-tree', {
+        class: ['vxe-tree', useScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '', useScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '', useScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '', useScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '', {
           [`size--${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,
           'node--hover': isNodeHover,
           'node--trigger': trigger === 'node',
           'is--loading': loading
         }],
+        style: wrapperStyles,
         ...teOns
       }, [headerSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refHeaderWrapperElem,
@@ -56749,6 +57381,36 @@ let crossTreeDragNodeObj = null;
       }, footerSlot({
         $tree: $xeTree
       })) : renderEmptyElement($xeTree),
+      /**
+       * 滚动条
+       */
+      useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: scrollbarWrapperClss
+      }, [scrollXVisible === false ? renderEmptyElement($xeTree) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refTrackXElem,
+        class: 'vxe-scrollbar--track-x',
+        onClick: clickTrackXEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refThumbXElem,
+        class: 'vxe-scrollbar--thumb-x',
+        onPointerdown: pointerdownThumbXEvent,
+        onPointermove: pointermoveThumbXEvent,
+        onPointerup: cleatPointerThumbEvent,
+        onPointercancel: cleatPointerThumbEvent,
+        onLostpointercapture: cleatPointerThumbEvent
+      })]), scrollYVisible === false ? renderEmptyElement($xeTree) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refTrackYElem,
+        class: 'vxe-scrollbar--track-y',
+        onClick: clickTrackYEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refThumbYElem,
+        class: 'vxe-scrollbar--thumb-y',
+        onPointerdown: pointerdownThumbYEvent,
+        onPointermove: pointermoveThumbYEvent,
+        onPointerup: cleatPointerThumbEvent,
+        onPointercancel: cleatPointerThumbEvent,
+        onLostpointercapture: cleatPointerThumbEvent
+      })])]) : renderEmptyElement($xeTree),
       /**
        * 拖拽提示
        */
@@ -56832,18 +57494,39 @@ let crossTreeDragNodeObj = null;
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.filterValue, () => {
       triggerSearchEvent(new Event('filter'));
     });
-    const hFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
+    const reFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.height, () => {
-      hFlag.value++;
+      reFlag.value++;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.minHeight, () => {
-      hFlag.value++;
+      reFlag.value++;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.maxHeight, () => {
-      hFlag.value++;
+      reFlag.value++;
     });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(hFlag, () => {
-      recalculate();
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.useScrollbar, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollYWidth, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollXHeight, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollXVisible, () => {
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        reFlag.value++;
+      });
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollYVisible, () => {
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        reFlag.value++;
+      });
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(reFlag, () => {
+      recalculate().then(() => {
+        recalculate();
+      });
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
       const {
@@ -56852,7 +57535,9 @@ let crossTreeDragNodeObj = null;
         menuConfig,
         showOverflow,
         lazy,
-        loadMethod
+        loadMethod,
+        autoResize,
+        useScrollbar
       } = props;
       const dragOpts = computeDragOpts.value;
       if (!showOverflow) {
@@ -56874,12 +57559,25 @@ let crossTreeDragNodeObj = null;
       if (menuConfig && !VxeUIContextMenu) {
         tree_errLog('vxe.error.reqComp', ['vxe-context-menu']);
       }
-      if (props.autoResize) {
-        const el = refElem.value;
+      const el = refElem.value;
+      if (useScrollbar || autoResize) {
+        const viewInnerEl = refVirtualBody.value;
+        const scrollObserver = globalResize.create(() => {
+          updateScrollbar();
+        });
+        if (el) {
+          scrollObserver.observe(el);
+        }
+        if (viewInnerEl) {
+          scrollObserver.observe(viewInnerEl);
+        }
+        internalData.scrollObserver = scrollObserver;
+      }
+      if (autoResize) {
         const parentEl = getParentElem();
         const resizeObserver = globalResize.create(() => {
           if (props.autoResize) {
-            recalculate();
+            reFlag.value++;
           }
         });
         if (el) {
@@ -56890,16 +57588,22 @@ let crossTreeDragNodeObj = null;
         }
         internalData.resizeObserver = resizeObserver;
       }
-      recalculate();
-      globalEvents.on($xeTree, 'resize', handleGlobalResizeEvent);
+      reFlag.value++;
+      globalEvents.on($xeTree, 'resize', () => {
+        reFlag.value++;
+      });
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
       const {
+        scrollObserver,
         resizeObserver
       } = internalData;
       if (resizeObserver) {
         resizeObserver.disconnect();
       }
+      if (scrollObserver) {
+        scrollObserver.disconnect();
+      }
       globalEvents.off($xeTree, 'resize');
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(reactData, tree_createReactData());
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(internalData, tree_createInternalData());