vxe-gantt 3.8.0 → 3.9.0-beta.0

package/es/gantt/src/gantt-view.js

@@ -1,5 +1,6 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import { VxeUI } from '@vxe-ui/core';
+import { getDefaultConfig } from '../../ui/src/utils';
 import { setScrollTop, setScrollLeft, removeClass, addClass, hasClass } from '../../ui/src/dom';
 import { getRefElem, getTaskBarLeft, getTaskBarWidth, hasMilestoneTask, getTaskType, hasSubviewTask } from './util';
 import { VxeGanttDependencyType } from './static';
@@ -7,7 +8,8 @@ import XEUtils from 'xe-utils';
 import GanttViewHeaderComponent from './gantt-header';
 import GanttViewBodyComponent from './gantt-body';
 import GanttViewFooterComponent from './gantt-footer';
-const { globalEvents } = VxeUI;
+const { getConfig, domUtils, scrollbarUtils, globalResize, globalEvents, renderEmptyElement } = VxeUI;
+const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils;
 const { FinishToStart, StartToFinish, StartToStart, FinishToFinish } = VxeGanttDependencyType;
 const sourceType = 'gantt';
 const secondMs = 1000;
@@ -36,7 +38,12 @@ function createInternalData() {
             startIndex: 0,
             endIndex: 0
         },
-        // 最后滚动位置
+        // 滚动条
+        // scrollObserver: undefined,
+        // isThumbDrag: false,
+        thumbDragOffset: 0,
+        yThumbTop: 0,
+        xThumbLeft: 0,
         lastScrollTop: 0,
         lastScrollLeft: 0
     };
@@ -58,6 +65,9 @@ function createReactData() {
         // 最后滚动时间戳
         lastScrollTime: 0,
         lazScrollLoading: false,
+        // 滚动条
+        yThumbHeight: 0,
+        xThumbWidth: 0,
         scrollVMLoading: false,
         scrollYHeight: 0,
         scrollYTop: 0,
@@ -1223,6 +1233,8 @@ function updateStyle($xeGanttView) {
     const $xeGantt = $xeGanttView.$xeGantt;
     const reactData = $xeGanttView.reactData;
     const internalData = $xeGanttView.internalData;
+    const ganttReactData = $xeGantt.reactData;
+    const { showLeftView } = ganttReactData;
     const { scrollbarWidth, scrollbarHeight, headerGroups, tableColumn } = reactData;
     const { elemStore, visibleColumn } = internalData;
     const $xeTable = internalData.xeTable;
@@ -1233,7 +1245,7 @@ function updateStyle($xeGanttView) {
     if (!$xeGantt) {
         return;
     }
-    const scrollbarOpts = $xeGantt.computeScrollbarOpts;
+    const scrollYVisible = $xeGanttView.computeScrollYVisible;
     const scrollbarXToTop = $xeGantt.computeScrollbarXToTop;
     const scrollbarYToLeft = $xeGantt.computeScrollbarYToLeft;
     const xLeftCornerEl = $xeGanttView.$refs.refScrollXLeftCornerElem;
@@ -1251,7 +1263,8 @@ function updateStyle($xeGanttView) {
         tFooterHeight = tableInternalData.tFooterHeight;
     }
     let yScrollbarVisible = 'visible';
-    if (scrollbarYToLeft || (scrollbarOpts.y && scrollbarOpts.y.visible === false)) {
+    const hideYScroll = scrollYVisible === false || scrollYVisible === 'hidden';
+    if (hideYScroll || (scrollbarYToLeft && showLeftView)) {
         osbWidth = 0;
         yScrollbarVisible = 'hidden';
     }
@@ -1365,6 +1378,7 @@ function handleLazyRecalculate($xeGanttView) {
             const resizeOpts = $xeTable.computeResizeOpts;
             refreshDelay = resizeOpts.refreshDelay || refreshDelay;
         }
+        $xeGanttView.updateScrollbar();
         if (rceTimeout) {
             clearTimeout(rceTimeout);
             if (rceRunTime && rceRunTime + (refreshDelay - 5) < Date.now()) {
@@ -1624,92 +1638,6 @@ function handleScrollData($xeGanttView, isRollY, isRollX, scrollTop, scrollLeft)
     reactData.lastScrollTime = Date.now();
     checkLastSyncScroll($xeGanttView, isRollX, isRollY);
 }
-function handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, scrollTop, scrollLeft) {
-    const $xeGantt = $xeGanttView.$xeGantt;
-    const internalData = $xeGanttView.internalData;
-    const $xeTable = internalData.xeTable;
-    const { lastScrollLeft, lastScrollTop } = internalData;
-    const xHandleEl = $xeGanttView.$refs.refScrollXHandleElem;
-    const yHandleEl = $xeGanttView.$refs.refScrollYHandleElem;
-    if (!xHandleEl || !yHandleEl) {
-        return;
-    }
-    if (!$xeTable) {
-        return;
-    }
-    const bodyHeight = yHandleEl.clientHeight;
-    const bodyWidth = xHandleEl.clientWidth;
-    const scrollHeight = yHandleEl.scrollHeight;
-    const scrollWidth = xHandleEl.scrollWidth;
-    let isTop = false;
-    let isBottom = false;
-    let isLeft = false;
-    let isRight = false;
-    let direction = '';
-    let isTopBoundary = false;
-    let isBottomBoundary = false;
-    let isLeftBoundary = false;
-    let isRightBoundary = false;
-    if (isRollX) {
-        const xThreshold = $xeTable.computeScrollXThreshold;
-        isLeft = scrollLeft <= 0;
-        if (!isLeft) {
-            isRight = scrollLeft + bodyWidth >= scrollWidth - 1;
-        }
-        if (scrollLeft > lastScrollLeft) {
-            direction = 'right';
-            if (scrollLeft + bodyWidth >= scrollWidth - xThreshold) {
-                isRightBoundary = true;
-            }
-        }
-        else {
-            direction = 'left';
-            if (scrollLeft <= xThreshold) {
-                isLeftBoundary = true;
-            }
-        }
-    }
-    if (isRollY) {
-        const yThreshold = $xeTable.computeScrollYThreshold;
-        isTop = scrollTop <= 0;
-        if (!isTop) {
-            isBottom = scrollTop + bodyHeight >= scrollHeight - 1;
-        }
-        if (scrollTop > lastScrollTop) {
-            direction = 'bottom';
-            if (scrollTop + bodyHeight >= scrollHeight - yThreshold) {
-                isBottomBoundary = true;
-            }
-        }
-        else {
-            direction = 'top';
-            if (scrollTop <= yThreshold) {
-                isTopBoundary = true;
-            }
-        }
-    }
-    handleScrollData($xeGanttView, isRollY, isRollX, scrollTop, scrollLeft);
-    const evntParams = {
-        source: sourceType,
-        scrollTop,
-        scrollLeft,
-        bodyHeight,
-        bodyWidth,
-        scrollHeight,
-        scrollWidth,
-        isX: isRollX,
-        isY: isRollY,
-        isTop,
-        isBottom,
-        isLeft,
-        isRight,
-        direction
-    };
-    if (isBottomBoundary || isTopBoundary || isRightBoundary || isLeftBoundary) {
-        $xeGantt.dispatchEvent('scroll-boundary', evntParams, evnt);
-    }
-    $xeGantt.dispatchEvent('scroll', evntParams, evnt);
-}
 /**
  * 同步表格滚动
  */
@@ -1743,13 +1671,104 @@ export default defineVxeComponent({
         const xID = XEUtils.uniqueId();
         const reactData = createReactData();
         const internalData = createInternalData();
+        const scrollDefaultConf = Object.assign({}, getConfig().scrollbar);
         return {
             xID,
             reactData,
-            internalData
+            internalData,
+            scrollDefaultConf,
+            reScrollFlag: 0
         };
     },
-    computed: Object.assign(Object.assign({}, {}), { computeScaleDateList() {
+    computed: Object.assign(Object.assign({}, {}), { computeScrollbarXOpts() {
+            const $xeGanttView = this;
+            const $xeGantt = $xeGanttView.$xeGantt;
+            const scrollbarOpts = $xeGantt.computeScrollbarOpts;
+            return scrollbarOpts.x ? Object.assign({}, scrollbarOpts.x, scrollbarOpts.xConfig) : (scrollbarOpts.xConfig || {});
+        },
+        computeScrollbarYOpts() {
+            const $xeGanttView = this;
+            const $xeGantt = $xeGanttView.$xeGantt;
+            const scrollbarOpts = $xeGantt.computeScrollbarOpts;
+            return scrollbarOpts.y ? Object.assign({}, scrollbarOpts.y, scrollbarOpts.yConfig) : (scrollbarOpts.yConfig || {});
+        },
+        computeScrollXHeight() {
+            const $xeGanttView = this;
+            const $xeGantt = $xeGanttView.$xeGantt;
+            const scrollDefaultConf = $xeGanttView.scrollDefaultConf;
+            const scrollbarOpts = $xeGantt.computeScrollbarOpts;
+            const scrollbarXOpts = $xeGanttView.computeScrollbarXOpts;
+            return XEUtils.toNumber(getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), scrollDefaultConf.height));
+        },
+        computeScrollYWidth() {
+            const $xeGanttView = this;
+            const $xeGantt = $xeGanttView.$xeGantt;
+            const scrollDefaultConf = $xeGanttView.scrollDefaultConf;
+            const scrollbarOpts = $xeGantt.computeScrollbarOpts;
+            const scrollbarYOpts = $xeGanttView.computeScrollbarYOpts;
+            return XEUtils.toNumber(getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), scrollDefaultConf.width));
+        },
+        computeScrollXVisible() {
+            const $xeGanttView = this;
+            const $xeGantt = $xeGanttView.$xeGantt;
+            const scrollbarOpts = $xeGantt.computeScrollbarOpts;
+            const scrollbarXOpts = $xeGanttView.computeScrollbarXOpts;
+            return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
+        },
+        computeScrollYVisible() {
+            const $xeGanttView = this;
+            const $xeGantt = $xeGanttView.$xeGantt;
+            const scrollbarOpts = $xeGantt.computeScrollbarOpts;
+            const scrollbarYOpts = $xeGanttView.computeScrollbarYOpts;
+            return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible);
+        },
+        computeScrollXAutoHide() {
+            const $xeGanttView = this;
+            const $xeGantt = $xeGanttView.$xeGantt;
+            const scrollDefaultConf = $xeGanttView.scrollDefaultConf;
+            const scrollbarOpts = $xeGantt.computeScrollbarOpts;
+            const scrollbarXOpts = $xeGanttView.computeScrollbarXOpts;
+            return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), scrollDefaultConf.autoHide);
+        },
+        computeScrollYAutoHide() {
+            const $xeGanttView = this;
+            const $xeGantt = $xeGanttView.$xeGantt;
+            const scrollDefaultConf = $xeGanttView.scrollDefaultConf;
+            const scrollbarOpts = $xeGantt.computeScrollbarOpts;
+            const scrollbarYOpts = $xeGanttView.computeScrollbarYOpts;
+            return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), scrollDefaultConf.autoHide);
+        },
+        computeScrollbarXToTop() {
+            const $xeGanttView = this;
+            const scrollbarXOpts = $xeGanttView.computeScrollbarXOpts;
+            return scrollbarXOpts.position === 'top';
+        },
+        computeScrollbarYToLeft() {
+            const $xeGanttView = this;
+            const scrollbarYOpts = $xeGanttView.computeScrollbarYOpts;
+            return scrollbarYOpts.position === 'left';
+        },
+        computeScrollbarWrapperClss() {
+            const $xeGanttView = this;
+            const reactData = $xeGanttView.reactData;
+            const $xeGantt = $xeGanttView.$xeGantt;
+            const { yThumbHeight, xThumbWidth } = reactData;
+            const scrollbarXToTop = $xeGantt.computeScrollbarXToTop;
+            const scrollbarYToLeft = $xeGantt.computeScrollbarYToLeft;
+            const scrollXVisible = $xeGanttView.computeScrollXVisible;
+            const scrollYVisible = $xeGanttView.computeScrollYVisible;
+            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
+            });
+        },
+        computeScaleDateList() {
             const $xeGanttView = this;
             const $xeGantt = $xeGanttView.$xeGantt;
             const reactData = $xeGanttView.reactData;
@@ -1988,6 +2007,93 @@ export default defineVxeComponent({
                 }
             }
         },
+        handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft) {
+            const $xeGanttView = this;
+            const internalData = $xeGanttView.internalData;
+            const $xeGantt = $xeGanttView.$xeGantt;
+            const $xeTable = internalData.xeTable;
+            const { elemStore, lastScrollLeft, lastScrollTop } = internalData;
+            const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+            if (!bodyScrollElem) {
+                return;
+            }
+            if (!$xeTable) {
+                return;
+            }
+            const bodyHeight = bodyScrollElem.clientHeight;
+            const bodyWidth = bodyScrollElem.clientWidth;
+            const scrollHeight = bodyScrollElem.scrollHeight;
+            const scrollWidth = bodyScrollElem.scrollWidth;
+            let isTop = false;
+            let isBottom = false;
+            let isLeft = false;
+            let isRight = false;
+            let direction = '';
+            let isTopBoundary = false;
+            let isBottomBoundary = false;
+            let isLeftBoundary = false;
+            let isRightBoundary = false;
+            if (isRollX) {
+                const xThreshold = $xeTable.computeScrollXThreshold;
+                isLeft = scrollLeft <= 0;
+                if (!isLeft) {
+                    isRight = scrollLeft + bodyWidth >= scrollWidth - 1;
+                }
+                if (scrollLeft > lastScrollLeft) {
+                    direction = 'right';
+                    if (scrollLeft + bodyWidth >= scrollWidth - xThreshold) {
+                        isRightBoundary = true;
+                    }
+                }
+                else {
+                    direction = 'left';
+                    if (scrollLeft <= xThreshold) {
+                        isLeftBoundary = true;
+                    }
+                }
+            }
+            if (isRollY) {
+                const yThreshold = $xeTable.computeScrollYThreshold;
+                isTop = scrollTop <= 0;
+                if (!isTop) {
+                    isBottom = scrollTop + bodyHeight >= scrollHeight - 1;
+                }
+                if (scrollTop > lastScrollTop) {
+                    direction = 'bottom';
+                    if (scrollTop + bodyHeight >= scrollHeight - yThreshold) {
+                        isBottomBoundary = true;
+                    }
+                }
+                else {
+                    direction = 'top';
+                    if (scrollTop <= yThreshold) {
+                        isTopBoundary = true;
+                    }
+                }
+            }
+            $xeGanttView.updateThumbOffset();
+            handleScrollData($xeGanttView, isRollY, isRollX, scrollTop, scrollLeft);
+            const evntParams = {
+                source: sourceType,
+                scrollTop,
+                scrollLeft,
+                bodyHeight,
+                bodyWidth,
+                scrollHeight,
+                scrollWidth,
+                isX: isRollX,
+                isY: isRollY,
+                isTop,
+                isBottom,
+                isLeft,
+                isRight,
+                direction
+            };
+            if (isBottomBoundary || isTopBoundary || isRightBoundary || isLeftBoundary) {
+                $xeGantt.dispatchEvent('scroll-boundary', evntParams, evnt);
+            }
+            $xeGantt.dispatchEvent('scroll', evntParams, evnt);
+        },
         triggerHeaderScrollEvent(evnt) {
             const $xeGanttView = this;
             const internalData = $xeGanttView.internalData;
@@ -2008,7 +2114,7 @@ export default defineVxeComponent({
                 internalData.inHeaderScroll = true;
                 setScrollLeft(xHandleEl, currLeftNum);
                 setScrollLeft(bodyScrollElem, currLeftNum);
-                handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
+                $xeGanttView.handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
             }
         },
         triggerBodyScrollEvent(evnt) {
@@ -2045,7 +2151,7 @@ export default defineVxeComponent({
                     triggerScrollXEvent($xeGanttView);
                 }
             }
-            handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, scrollLeft);
+            $xeGanttView.handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, scrollLeft);
         },
         // triggerFooterScrollEvent (evnt: Event) {
         //   const $xeGanttView = this
@@ -2062,7 +2168,7 @@ export default defineVxeComponent({
         //     const isRollX = true
         //     const isRollY = false
         //     const currLeftNum = wrapperEl.scrollLeft
-        //     handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum)
+        //     $xeGanttView.handleScrollEvent(, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum)
         //   }
         // },
         triggerVirtualScrollXEvent(evnt) {
@@ -2087,7 +2193,7 @@ export default defineVxeComponent({
                 if (scrollXLoad) {
                     triggerScrollXEvent($xeGanttView);
                 }
-                handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
+                $xeGanttView.handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
             }
         },
         triggerVirtualScrollYEvent(evnt) {
@@ -2106,7 +2212,7 @@ export default defineVxeComponent({
                 internalData.inVirtualScroll = true;
                 setScrollTop(bodyScrollElem, currTopNum);
                 syncTableScrollTop($xeGanttView, currTopNum);
-                handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, currTopNum, wrapperEl.scrollLeft);
+                $xeGanttView.handleScrollEvent(evnt, isRollY, isRollX, currTopNum, wrapperEl.scrollLeft);
             }
         },
         handleUpdateSXSpace() {
@@ -2122,10 +2228,207 @@ export default defineVxeComponent({
             const reactData = $xeGanttView.reactData;
             reactData.scrollYLoad = sYLoad;
         },
+        /**
+         * @private
+         */
+        updateScrollbar() {
+            const $xeGanttView = this;
+            $xeGanttView.updateThumbSize();
+            $xeGanttView.updateThumbOffset();
+        },
         handleGlobalResizeEvent() {
             const $xeGanttView = this;
             handleLazyRecalculate($xeGanttView);
         },
+        // 滚动条
+        updateThumbSize() {
+            const $xeGanttView = this;
+            const reactData = $xeGanttView.reactData;
+            const internalData = $xeGanttView.internalData;
+            const { elemStore } = internalData;
+            const viewEl = getRefElem(elemStore['main-body-scroll']);
+            if (!viewEl) {
+                return;
+            }
+            if (!viewEl.clientHeight || !viewEl.clientHeight) {
+                return;
+            }
+            const trackXEl = $xeGanttView.$refs.refTrackXElem;
+            const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+            const thumbXElem = $xeGanttView.$refs.refThumbXElem;
+            if (thumbXElem) {
+                thumbXElem.style.width = xThumbWidth + 'px';
+            }
+            reactData.xThumbWidth = xThumbWidth;
+            const trackYEl = $xeGanttView.$refs.refTrackYElem;
+            const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+            const thumbYElem = $xeGanttView.$refs.refThumbYElem;
+            if (thumbYElem) {
+                thumbYElem.style.height = yThumbHeight + 'px';
+            }
+            reactData.yThumbHeight = yThumbHeight;
+        },
+        updateThumbOffset() {
+            const $xeGanttView = this;
+            const reactData = $xeGanttView.reactData;
+            const internalData = $xeGanttView.internalData;
+            const { elemStore } = internalData;
+            const viewEl = getRefElem(elemStore['main-body-scroll']);
+            if (!viewEl) {
+                return;
+            }
+            if (!viewEl.clientHeight || !viewEl.clientHeight) {
+                return;
+            }
+            const { xThumbWidth, yThumbHeight } = reactData;
+            const trackXEl = $xeGanttView.$refs.refTrackXElem;
+            const thumbXElem = $xeGanttView.$refs.refThumbXElem;
+            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 = $xeGanttView.$refs.refTrackYElem;
+            const thumbYElem = $xeGanttView.$refs.refThumbYElem;
+            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)`;
+            }
+        },
+        clickTrackXEvent(evnt) {
+            const $xeGanttView = this;
+            const reactData = $xeGanttView.reactData;
+            const internalData = $xeGanttView.internalData;
+            const trackEl = evnt.currentTarget;
+            if (trackEl !== evnt.target) {
+                return;
+            }
+            const { elemStore } = internalData;
+            const viewEl = getRefElem(elemStore['main-body-scroll']);
+            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'
+            });
+        },
+        clickTrackYEvent(evnt) {
+            const $xeGanttView = this;
+            const reactData = $xeGanttView.reactData;
+            const internalData = $xeGanttView.internalData;
+            const trackEl = evnt.currentTarget;
+            if (trackEl !== evnt.target) {
+                return;
+            }
+            const { elemStore } = internalData;
+            const viewEl = getRefElem(elemStore['main-body-scroll']);
+            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'
+            });
+        },
+        pointerdownThumbXEvent(evnt) {
+            const $xeGanttView = this;
+            const reactData = $xeGanttView.reactData;
+            const internalData = $xeGanttView.internalData;
+            const thumbEl = evnt.currentTarget;
+            internalData.isThumbDrag = true;
+            thumbEl.setPointerCapture(evnt.pointerId);
+            const { elemStore } = internalData;
+            const viewEl = getRefElem(elemStore['main-body-scroll']);
+            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;
+        },
+        pointermoveThumbXEvent(evnt) {
+            const $xeGanttView = this;
+            const reactData = $xeGanttView.reactData;
+            const internalData = $xeGanttView.internalData;
+            const thumbEl = evnt.currentTarget;
+            if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+                return;
+            }
+            const { elemStore, isThumbDrag, thumbDragOffset } = internalData;
+            if (isThumbDrag) {
+                const viewEl = getRefElem(elemStore['main-body-scroll']);
+                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);
+            }
+        },
+        cleatPointerThumbEvent(evnt) {
+            const $xeGanttView = this;
+            const internalData = $xeGanttView.internalData;
+            const thumbEl = evnt.currentTarget;
+            thumbEl.releasePointerCapture(evnt.pointerId);
+            internalData.isThumbDrag = false;
+        },
+        pointerdownThumbYEvent(evnt) {
+            const $xeGanttView = this;
+            const reactData = $xeGanttView.reactData;
+            const internalData = $xeGanttView.internalData;
+            const thumbEl = evnt.currentTarget;
+            internalData.isThumbDrag = true;
+            thumbEl.setPointerCapture(evnt.pointerId);
+            const { elemStore } = internalData;
+            const viewEl = getRefElem(elemStore['main-body-scroll']);
+            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;
+        },
+        pointermoveThumbYEvent(evnt) {
+            const $xeGanttView = this;
+            const reactData = $xeGanttView.reactData;
+            const internalData = $xeGanttView.internalData;
+            const thumbEl = evnt.currentTarget;
+            if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+                return;
+            }
+            const { elemStore, isThumbDrag, thumbDragOffset } = internalData;
+            if (isThumbDrag) {
+                const viewEl = getRefElem(elemStore['main-body-scroll']);
+                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);
+            }
+        },
         //
         // Render
         //
@@ -2211,7 +2514,7 @@ export default defineVxeComponent({
                 h(GanttViewFooterComponent)
             ]);
         },
-        renderBody(h) {
+        renderNativeBody(h) {
             const $xeGanttView = this;
             const $xeGantt = $xeGanttView.$xeGantt;
             const scrollbarYToLeft = $xeGantt.computeScrollbarYToLeft;
@@ -2227,10 +2530,89 @@ export default defineVxeComponent({
                     $xeGanttView.renderScrollY(h)
                 ]);
         },
+        renderVirtualBody(h) {
+            const $xeGanttView = this;
+            const $xeGantt = $xeGanttView.$xeGantt;
+            const reactData = $xeGanttView.reactData;
+            const ganttReactData = $xeGantt.reactData;
+            const ganttProps = $xeGantt;
+            const { showLeftView } = ganttReactData;
+            const { useScrollbar } = ganttProps;
+            const { xThumbWidth, yThumbHeight } = reactData;
+            const scrollbarOpts = $xeGantt.computeScrollbarOpts;
+            const scrollXAutoHide = $xeGanttView.computeScrollXAutoHide;
+            const scrollYAutoHide = $xeGanttView.computeScrollYAutoHide;
+            const scrollXVisible = $xeGanttView.computeScrollXVisible;
+            const scrollYVisible = $xeGanttView.computeScrollYVisible;
+            const scrollbarXToTop = $xeGanttView.computeScrollbarXToTop;
+            const scrollbarYToLeft = $xeGantt.computeScrollbarYToLeft;
+            const scrollbarWrapperClss = $xeGanttView.computeScrollbarWrapperClss;
+            return h('div', {
+                key: 'lvb',
+                class: ['vxe-gantt--layout-wrapper', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
+                        '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
+                    }]
+            }, [
+                $xeGanttView.renderViewport(h),
+                h('div', {
+                    class: scrollbarWrapperClss
+                }, [
+                    scrollXVisible === false
+                        ? renderEmptyElement($xeGantt)
+                        : h('div', {
+                            ref: 'refTrackXElem',
+                            class: 'vxe-scrollbar--track-x',
+                            on: {
+                                click: $xeGanttView.clickTrackXEvent
+                            }
+                        }, [
+                            h('div', {
+                                ref: 'refThumbXElem',
+                                class: 'vxe-scrollbar--thumb-x',
+                                on: {
+                                    pointerdown: $xeGanttView.pointerdownThumbXEvent,
+                                    pointermove: $xeGanttView.pointermoveThumbXEvent,
+                                    pointerup: $xeGanttView.cleatPointerThumbEvent,
+                                    pointercancel: $xeGanttView.cleatPointerThumbEvent,
+                                    lostpointercapture: $xeGanttView.cleatPointerThumbEvent
+                                }
+                            })
+                        ]),
+                    (scrollbarYToLeft && showLeftView) || scrollYVisible === false
+                        ? renderEmptyElement($xeGantt)
+                        : h('div', {
+                            ref: 'refTrackYElem',
+                            class: 'vxe-scrollbar--track-y',
+                            on: {
+                                click: $xeGanttView.clickTrackYEvent
+                            }
+                        }, [
+                            h('div', {
+                                ref: 'refThumbYElem',
+                                class: 'vxe-scrollbar--thumb-y',
+                                on: {
+                                    pointerdown: $xeGanttView.pointerdownThumbYEvent,
+                                    pointermove: $xeGanttView.pointermoveThumbYEvent,
+                                    pointerup: $xeGanttView.cleatPointerThumbEvent,
+                                    pointercancel: $xeGanttView.cleatPointerThumbEvent,
+                                    lostpointercapture: $xeGanttView.cleatPointerThumbEvent
+                                }
+                            })
+                        ])
+                ])
+            ]);
+        },
         renderVN(h) {
             const $xeGanttView = this;
             const $xeGantt = $xeGanttView.$xeGantt;
             const reactData = $xeGanttView.reactData;
+            const ganttProps = $xeGantt;
+            const { useScrollbar } = ganttProps;
             const { overflowX, overflowY, scrollXLoad, scrollYLoad } = reactData;
             const scrollbarXToTop = $xeGantt.computeScrollbarXToTop;
             return h('div', {
@@ -2244,15 +2626,17 @@ export default defineVxeComponent({
             }, [
                 h('div', {
                     class: 'vxe-gantt-view--render-wrapper'
-                }, scrollbarXToTop
-                    ? [
-                        $xeGanttView.renderScrollX(h),
-                        $xeGanttView.renderBody(h)
-                    ]
-                    : [
-                        $xeGanttView.renderBody(h),
-                        $xeGanttView.renderScrollX(h)
-                    ]),
+                }, useScrollbar
+                    ? [$xeGanttView.renderVirtualBody(h)]
+                    : (scrollbarXToTop
+                        ? [
+                            $xeGanttView.renderScrollX(h),
+                            $xeGanttView.renderNativeBody(h)
+                        ]
+                        : [
+                            $xeGanttView.renderNativeBody(h),
+                            $xeGanttView.renderScrollX(h)
+                        ])),
                 h('div', {
                     class: 'vxe-gantt-view--render-vars'
                 }, [
@@ -2264,14 +2648,74 @@ export default defineVxeComponent({
             ]);
         }
     },
+    watch: {
+        computeScrollbarXToTop() {
+            const $xeGanttView = this;
+            $xeGanttView.reScrollFlag++;
+        },
+        computeScrollbarYToLeft() {
+            const $xeGanttView = this;
+            $xeGanttView.reScrollFlag++;
+        },
+        computeScrollXVisible() {
+            const $xeGanttView = this;
+            $xeGanttView.reScrollFlag++;
+        },
+        computeScrollYVisible() {
+            const $xeGanttView = this;
+            $xeGanttView.reScrollFlag++;
+        },
+        computeScrollXHeight() {
+            const $xeGanttView = this;
+            $xeGanttView.reScrollFlag++;
+        },
+        computeScrollYWidth() {
+            const $xeGanttView = this;
+            $xeGanttView.reScrollFlag++;
+        },
+        reScrollFlag() {
+            const $xeGanttView = this;
+            $xeGanttView.$nextTick(() => {
+                $xeGanttView.updateScrollbar();
+                $xeGanttView.$nextTick(() => {
+                    $xeGanttView.updateScrollbar();
+                });
+            });
+        }
+    },
     mounted() {
         const $xeGanttView = this;
+        const $xeGantt = $xeGanttView.$xeGantt;
+        const internalData = $xeGanttView.internalData;
+        $xeGanttView.$nextTick(() => {
+            const ganttProps = $xeGantt;
+            const { useScrollbar } = ganttProps;
+            const { elemStore } = internalData;
+            const el = $xeGanttView.$refs.refElem;
+            if (useScrollbar) {
+                const viewInnerEl = getRefElem(elemStore['main-body-table']);
+                const scrollObserver = globalResize.create(() => {
+                    $xeGanttView.reScrollFlag++;
+                });
+                if (el) {
+                    scrollObserver.observe(el);
+                }
+                if (viewInnerEl) {
+                    scrollObserver.observe(viewInnerEl);
+                }
+                internalData.scrollObserver = scrollObserver;
+            }
+        });
         globalEvents.on($xeGanttView, 'resize', $xeGanttView.handleGlobalResizeEvent);
     },
     beforeDestroy() {
         const $xeGanttView = this;
         const reactData = $xeGanttView.reactData;
         const internalData = $xeGanttView.internalData;
+        const { scrollObserver } = internalData;
+        if (scrollObserver) {
+            scrollObserver.disconnect();
+        }
         globalEvents.off($xeGanttView, 'keydown');
         XEUtils.assign(reactData, createReactData());
         XEUtils.assign(internalData, createInternalData());