vxe-pc-ui 3.18.20 → 3.18.22

package/es/scrollbar/src/scrollbar.js

@@ -0,0 +1,540 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { VxeUI } from '../../ui';
+import { toCssUnit } from '../../ui/src/dom';
+import { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } from './util';
+import VxeLoadingComponent from '../../loading';
+const { getConfig, createEvent, domUtils, globalResize, renderEmptyElement } = VxeUI;
+function createReactData() {
+    return {
+        yThumbHeight: 0,
+        xThumbWidth: 0
+    };
+}
+function createInternalData() {
+    return {
+        // resizeObserver: undefined,
+        // isThumbDrag: false,
+        thumbDragOffset: 0,
+        yThumbTop: 0,
+        xThumbLeft: 0,
+        lastScrollTop: 0,
+        lastScrollLeft: 0
+    };
+}
+export default {
+    name: 'VxeScrollbar',
+    props: {
+        width: [String, Number],
+        height: [String, Number],
+        minWidth: [String, Number],
+        minHeight: [String, Number],
+        maxWidth: [String, Number],
+        maxHeight: [String, Number],
+        loading: Boolean,
+        native: {
+            type: Boolean,
+            default: () => getConfig().scrollbar.native
+        },
+        xConfig: Object,
+        yConfig: Object,
+        className: String,
+        viewClassName: String,
+        autoResize: {
+            type: Boolean,
+            default: () => getConfig().scrollbar.autoResize
+        },
+        syncResize: [Boolean, String, Number]
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = createReactData();
+        return Object.assign(Object.assign({}, {}), { xID,
+            reactData, reFlag: 0 });
+    },
+    computed: {
+        computeWrapperStyle() {
+            const $xeScrollbar = this;
+            const props = $xeScrollbar;
+            const { width, height, minWidth, minHeight, maxWidth, maxHeight } = props;
+            const xOpts = $xeScrollbar.computeXOpts;
+            const yOpts = $xeScrollbar.computeYOpts;
+            const stys = {};
+            if (width) {
+                stys.width = toCssUnit(width);
+            }
+            if (height) {
+                stys.height = toCssUnit(height);
+            }
+            if (minWidth) {
+                stys.minWidth = toCssUnit(minWidth);
+            }
+            if (minHeight) {
+                stys.minHeight = toCssUnit(minHeight);
+            }
+            if (maxWidth) {
+                stys.maxWidth = toCssUnit(maxWidth);
+            }
+            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);
+            }
+            return stys;
+        },
+        computeWrapperClss() {
+            const $xeScrollbar = this;
+            const props = $xeScrollbar;
+            const { native, className } = props;
+            const xOpts = $xeScrollbar.computeXOpts;
+            const yOpts = $xeScrollbar.computeYOpts;
+            return domUtils.buildClass([
+                'vxe-scrollbar',
+                `ov-x--${xOpts.visible || 'visible'}`,
+                `ov-y--${yOpts.visible || 'visible'}`,
+                native ? 'is--native' : 'is--virtual',
+                className
+            ], {
+                'ov-x--auto-hide': xOpts.autoHide,
+                'ov-y--auto-hide': yOpts.autoHide
+            });
+        },
+        computeViewClss() {
+            const $xeScrollbar = this;
+            const props = $xeScrollbar;
+            const { viewClassName } = props;
+            return domUtils.buildClass([
+                'vxe-scrollbar--view',
+                viewClassName
+            ]);
+        },
+        computeXOpts() {
+            const $xeScrollbar = this;
+            const props = $xeScrollbar;
+            return Object.assign({}, getConfig().scrollbar.xConfig, props.xConfig);
+        },
+        computeYOpts() {
+            const $xeScrollbar = this;
+            const props = $xeScrollbar;
+            return Object.assign({}, getConfig().scrollbar.yConfig, props.yConfig);
+        }
+    },
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeScrollbar = this;
+            $xeScrollbar.$emit(type, createEvent(evnt, { $scrollbar: $xeScrollbar }, params));
+        },
+        scrollTo(left, top) {
+            const $xeScrollbar = this;
+            const viewEl = $xeScrollbar.$refs.refViewElem;
+            if (viewEl) {
+                if (XEUtils.isNumber(left)) {
+                    viewEl.scrollTo(left, top || 0);
+                }
+                else {
+                    viewEl.scrollTo(left);
+                }
+            }
+        },
+        scrollIntoView() {
+            const $xeScrollbar = this;
+            const viewEl = $xeScrollbar.$refs.refViewElem;
+            if (viewEl) {
+                viewEl.scrollIntoView();
+            }
+        },
+        recalculate() {
+            const $xeScrollbar = this;
+            $xeScrollbar.updateThumbSize();
+            $xeScrollbar.updateThumbOffset();
+            return $xeScrollbar.$nextTick();
+        },
+        updateThumbSize() {
+            const $xeScrollbar = this;
+            const reactData = $xeScrollbar.reactData;
+            const viewEl = $xeScrollbar.$refs.refViewElem;
+            if (!viewEl) {
+                return;
+            }
+            const trackXEl = $xeScrollbar.$refs.refTrackXElem;
+            const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+            const thumbXElem = $xeScrollbar.$refs.refThumbXElem;
+            if (thumbXElem) {
+                thumbXElem.style.width = xThumbWidth + 'px';
+            }
+            reactData.xThumbWidth = xThumbWidth;
+            const trackYEl = $xeScrollbar.$refs.refTrackYElem;
+            const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+            const thumbYElem = $xeScrollbar.$refs.refThumbYElem;
+            if (thumbYElem) {
+                thumbYElem.style.height = yThumbHeight + 'px';
+            }
+            reactData.yThumbHeight = yThumbHeight;
+        },
+        updateThumbOffset() {
+            const $xeScrollbar = this;
+            const reactData = $xeScrollbar.reactData;
+            const internalData = $xeScrollbar.internalData;
+            const viewEl = $xeScrollbar.$refs.refViewElem;
+            if (!viewEl) {
+                return;
+            }
+            const { xThumbWidth, yThumbHeight } = reactData;
+            const trackXEl = $xeScrollbar.$refs.refTrackXElem;
+            const thumbXElem = $xeScrollbar.$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 = $xeScrollbar.$refs.refTrackYElem;
+            const thumbYElem = $xeScrollbar.$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)`;
+            }
+        },
+        scrollEvent(evnt) {
+            const $xeScrollbar = this;
+            const reactData = $xeScrollbar.reactData;
+            const internalData = $xeScrollbar.internalData;
+            const { xThumbWidth, yThumbHeight } = reactData;
+            const { lastScrollTop, lastScrollLeft } = internalData;
+            const xOpts = $xeScrollbar.computeXOpts;
+            const yOpts = $xeScrollbar.computeYOpts;
+            const viewEl = evnt.currentTarget;
+            const { scrollTop, scrollLeft, clientWidth, clientHeight, scrollHeight, scrollWidth } = viewEl;
+            let direction = '';
+            let isTopBoundary = false;
+            let isBottomBoundary = false;
+            let isLeftBoundary = false;
+            let isRightBoundary = false;
+            if (lastScrollTop !== scrollTop) {
+                const yThreshold = XEUtils.toNumber(yOpts.threshold) || 1;
+                if (lastScrollTop < scrollTop) {
+                    direction = 'bottom';
+                    if (yThumbHeight > 0 && scrollTop + clientHeight >= scrollHeight - yThreshold) {
+                        isBottomBoundary = true;
+                    }
+                }
+                else {
+                    direction = 'top';
+                    if (yThumbHeight > 0 && scrollTop <= yThreshold) {
+                        isTopBoundary = true;
+                    }
+                }
+            }
+            if (lastScrollLeft !== scrollLeft) {
+                const xThreshold = XEUtils.toNumber(xOpts.threshold) || 1;
+                if (lastScrollLeft < scrollLeft) {
+                    direction = 'right';
+                    if (xThumbWidth > 0 && scrollLeft + clientWidth >= scrollWidth - xThreshold) {
+                        isRightBoundary = true;
+                    }
+                }
+                else {
+                    direction = 'left';
+                    if (xThumbWidth > 0 && scrollLeft <= xThreshold) {
+                        isLeftBoundary = true;
+                    }
+                }
+            }
+            $xeScrollbar.updateThumbOffset();
+            internalData.lastScrollTop = scrollTop;
+            internalData.lastScrollLeft = scrollLeft;
+            if (isBottomBoundary || isTopBoundary || isRightBoundary || isLeftBoundary) {
+                $xeScrollbar.dispatchEvent('scroll-boundary', {
+                    direction: direction,
+                    isTop: isTopBoundary,
+                    isBottom: isBottomBoundary,
+                    isLeft: isLeftBoundary,
+                    isRight: isRightBoundary,
+                    scrollTop: scrollTop,
+                    scrollLeft: scrollLeft,
+                    clientWidth: clientWidth,
+                    clientHeight: clientHeight,
+                    scrollHeight: scrollHeight,
+                    scrollWidth: scrollWidth
+                }, evnt);
+            }
+            $xeScrollbar.dispatchEvent('scroll', {
+                direction: direction,
+                isTop: yThumbHeight > 0 && scrollTop <= 0,
+                isBottom: yThumbHeight > 0 && scrollTop + clientHeight >= scrollHeight,
+                isLeft: xThumbWidth > 0 && scrollLeft <= 0,
+                isRight: xThumbWidth > 0 && scrollLeft + clientWidth >= scrollWidth,
+                scrollTop: scrollTop,
+                scrollLeft: scrollLeft,
+                clientWidth: clientWidth,
+                clientHeight: clientHeight,
+                scrollHeight: scrollHeight,
+                scrollWidth: scrollWidth
+            }, evnt);
+        },
+        clickTrackXEvent(evnt) {
+            const $xeScrollbar = this;
+            const reactData = $xeScrollbar.reactData;
+            const trackEl = evnt.currentTarget;
+            if (trackEl !== evnt.target) {
+                return;
+            }
+            const viewEl = $xeScrollbar.$refs.refViewElem;
+            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 $xeScrollbar = this;
+            const reactData = $xeScrollbar.reactData;
+            const trackEl = evnt.currentTarget;
+            if (trackEl !== evnt.target) {
+                return;
+            }
+            const viewEl = $xeScrollbar.$refs.refViewElem;
+            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 $xeScrollbar = this;
+            const reactData = $xeScrollbar.reactData;
+            const internalData = $xeScrollbar.internalData;
+            const thumbEl = evnt.currentTarget;
+            internalData.isThumbDrag = true;
+            thumbEl.setPointerCapture(evnt.pointerId);
+            const viewEl = $xeScrollbar.$refs.refViewElem;
+            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 $xeScrollbar = this;
+            const reactData = $xeScrollbar.reactData;
+            const internalData = $xeScrollbar.internalData;
+            const { isThumbDrag, thumbDragOffset } = internalData;
+            if (isThumbDrag) {
+                const viewEl = $xeScrollbar.$refs.refViewElem;
+                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 $xeScrollbar = this;
+            const internalData = $xeScrollbar.internalData;
+            const thumbEl = evnt.currentTarget;
+            thumbEl.releasePointerCapture(evnt.pointerId);
+            internalData.isThumbDrag = false;
+        },
+        pointerdownThumbYEvent(evnt) {
+            const $xeScrollbar = this;
+            const reactData = $xeScrollbar.reactData;
+            const internalData = $xeScrollbar.internalData;
+            const thumbEl = evnt.currentTarget;
+            internalData.isThumbDrag = true;
+            thumbEl.setPointerCapture(evnt.pointerId);
+            const viewEl = $xeScrollbar.$refs.refViewElem;
+            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 $xeScrollbar = this;
+            const reactData = $xeScrollbar.reactData;
+            const internalData = $xeScrollbar.internalData;
+            const { isThumbDrag, thumbDragOffset } = internalData;
+            if (isThumbDrag) {
+                const viewEl = $xeScrollbar.$refs.refViewElem;
+                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
+        //
+        renderVN(h) {
+            const $xeScrollbar = this;
+            const props = $xeScrollbar;
+            const slots = $xeScrollbar.$scopedSlots;
+            const { native, loading } = props;
+            const wrapperStyle = $xeScrollbar.computeWrapperStyle;
+            const wrapperClss = $xeScrollbar.computeWrapperClss;
+            const viewClss = $xeScrollbar.computeViewClss;
+            const xOpts = $xeScrollbar.computeXOpts;
+            const yOpts = $xeScrollbar.computeYOpts;
+            const defaultSlot = slots.default;
+            return h('div', {
+                ref: 'refElem',
+                class: wrapperClss,
+                style: wrapperStyle
+            }, [
+                h('div', {
+                    ref: 'refViewElem',
+                    class: viewClss,
+                    on: {
+                        scroll: $xeScrollbar.scrollEvent
+                    }
+                }, [
+                    h('div', {
+                        ref: 'refViewInnerElem',
+                        class: 'vxe-scrollbar--view-inner'
+                    }, defaultSlot ? defaultSlot({}) : [])
+                ]),
+                native || xOpts.visible === 'hidden'
+                    ? renderEmptyElement($xeScrollbar)
+                    : h('div', {
+                        ref: 'refTrackXElem',
+                        class: 'vxe-scrollbar--track-x',
+                        on: {
+                            click: $xeScrollbar.clickTrackXEvent
+                        }
+                    }, [
+                        h('div', {
+                            ref: 'refThumbXElem',
+                            class: 'vxe-scrollbar--thumb-x',
+                            on: {
+                                pointerdown: $xeScrollbar.pointerdownThumbXEvent,
+                                pointermove: $xeScrollbar.pointermoveThumbXEvent,
+                                pointerup: $xeScrollbar.cleatPointerThumbEvent,
+                                pointercancel: $xeScrollbar.cleatPointerThumbEvent,
+                                lostpointercapture: $xeScrollbar.cleatPointerThumbEvent
+                            }
+                        })
+                    ]),
+                native || yOpts.visible === 'hidden'
+                    ? renderEmptyElement($xeScrollbar)
+                    : h('div', {
+                        ref: 'refTrackYElem',
+                        class: 'vxe-scrollbar--track-y',
+                        on: {
+                            click: $xeScrollbar.clickTrackYEvent
+                        }
+                    }, [
+                        h('div', {
+                            ref: 'refThumbYElem',
+                            class: 'vxe-scrollbar--thumb-y',
+                            on: {
+                                pointerdown: $xeScrollbar.pointerdownThumbYEvent,
+                                pointermove: $xeScrollbar.pointermoveThumbYEvent,
+                                pointerup: $xeScrollbar.cleatPointerThumbEvent,
+                                pointercancel: $xeScrollbar.cleatPointerThumbEvent,
+                                lostpointercapture: $xeScrollbar.cleatPointerThumbEvent
+                            }
+                        })
+                    ]),
+                h(VxeLoadingComponent, {
+                    class: 'vxe-scrollbar--loading',
+                    props: {
+                        value: loading
+                    }
+                })
+            ]);
+        }
+    },
+    watch: {
+        native() {
+            const $xeScrollbar = this;
+            $xeScrollbar.reFlag++;
+        },
+        syncResize() {
+            const $xeScrollbar = this;
+            $xeScrollbar.reFlag++;
+        },
+        reFlag() {
+            const $xeScrollbar = this;
+            $xeScrollbar.recalculate().then(() => {
+                $xeScrollbar.recalculate();
+            });
+        }
+    },
+    created() {
+        const $xeScrollbar = this;
+        $xeScrollbar.internalData = createInternalData();
+    },
+    mounted() {
+        const $xeScrollbar = this;
+        const props = $xeScrollbar;
+        const internalData = $xeScrollbar.internalData;
+        const { autoResize } = props;
+        const viewInnerEl = $xeScrollbar.$refs.refViewInnerElem;
+        if (autoResize && viewInnerEl) {
+            const resizeObserver = globalResize.create(() => {
+                if (props.autoResize) {
+                    $xeScrollbar.reFlag++;
+                }
+            });
+            resizeObserver.observe(viewInnerEl);
+            internalData.resizeObserver = resizeObserver;
+        }
+        $xeScrollbar.$nextTick(() => {
+            $xeScrollbar.recalculate();
+        });
+    },
+    beforeDestroy() {
+        const $xeScrollbar = this;
+        const internalData = $xeScrollbar.internalData;
+        const { resizeObserver } = internalData;
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+        }
+    },
+    destroyed() {
+        const $xeScrollbar = this;
+        const reactData = $xeScrollbar.reactData;
+        const internalData = $xeScrollbar.internalData;
+        XEUtils.assign(reactData, createReactData());
+        XEUtils.assign(internalData, createInternalData());
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+};

package/es/scrollbar/src/util.js

@@ -0,0 +1,54 @@
+/**
+ * 计算滚动条滑块的长度
+ */
+export function 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));
+}
+/**
+ * 计算滚动条滑块的偏移位置
+ */
+export function 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;
+}
+/**
+ * 根据点击轨道的位置，计算滑块的偏移位置
+ */
+export function 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 时，根据鼠标位置计算滑块的偏移位置
+ */
+export function 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;
+}

package/es/scrollbar/style.css

@@ -0,0 +1,102 @@
+.vxe-scrollbar {
+  width: 100%;
+  position: relative;
+}
+.vxe-scrollbar.is--virtual > .vxe-scrollbar--view {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  overflow-x: auto;
+  overflow-y: auto;
+}
+.vxe-scrollbar.is--virtual > .vxe-scrollbar--view::-webkit-scrollbar {
+  display: none;
+}
+.vxe-scrollbar.is--virtual.ov-x--auto-hide:hover > .vxe-scrollbar--track-x {
+  opacity: 1;
+}
+.vxe-scrollbar.is--virtual.ov-x--auto-hide > .vxe-scrollbar--track-x {
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+.vxe-scrollbar.is--virtual.ov-y--auto-hide:hover > .vxe-scrollbar--track-y {
+  opacity: 1;
+}
+.vxe-scrollbar.is--virtual.ov-y--auto-hide > .vxe-scrollbar--track-y {
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+.vxe-scrollbar.is--native > .vxe-scrollbar--view {
+  overflow-x: auto;
+  overflow-y: auto;
+}
+.vxe-scrollbar.is--native.ov-x--hidden > .vxe-scrollbar--view {
+  overflow-x: hidden;
+}
+.vxe-scrollbar.is--native.ov-y--hidden > .vxe-scrollbar--view {
+  overflow-y: hidden;
+}
+.vxe-scrollbar.is--native > .vxe-scrollbar--view::-webkit-scrollbar {
+  width: var(--vxe-ui-scrollbar-y-width);
+  height: var(--vxe-ui-scrollbar-x-height);
+}
+.vxe-scrollbar.is--native > .vxe-scrollbar--view::-webkit-scrollbar-thumb {
+  border-radius: var(--vxe-ui-base-border-radius);
+  background-color: var(--vxe-ui-scrollbar-thumb-background-color);
+}
+.vxe-scrollbar.is--native > .vxe-scrollbar--view::-webkit-scrollbar-thumb:hover {
+  background-color: var(--vxe-ui-scrollbar-thumb-hover-background-color);
+}
+.vxe-scrollbar.is--native > .vxe-scrollbar--view::-webkit-scrollbar-thumb:active {
+  background-color: var(--vxe-ui-scrollbar-thumb-active-background-color);
+}
+
+.vxe-scrollbar--view {
+  height: 100%;
+  width: 100%;
+}
+
+.vxe-scrollbar--track-x,
+.vxe-scrollbar--track-y {
+  position: absolute;
+  background-color: var(--vxe-ui-scrollbar-track-background-color);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.vxe-scrollbar--track-x {
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  height: var(--vxe-ui-scrollbar-x-height);
+}
+
+.vxe-scrollbar--track-y {
+  height: 100%;
+  right: 0;
+  top: 0;
+  width: var(--vxe-ui-scrollbar-y-width);
+}
+
+.vxe-scrollbar--thumb-y {
+  width: 100%;
+}
+
+.vxe-scrollbar--thumb-x {
+  height: 100%;
+}
+
+.vxe-scrollbar--thumb-x,
+.vxe-scrollbar--thumb-y {
+  border-radius: var(--vxe-ui-base-border-radius);
+  background-color: var(--vxe-ui-scrollbar-thumb-background-color);
+}
+.vxe-scrollbar--thumb-x:hover,
+.vxe-scrollbar--thumb-y:hover {
+  background-color: var(--vxe-ui-scrollbar-thumb-hover-background-color);
+}
+.vxe-scrollbar--thumb-x:active,
+.vxe-scrollbar--thumb-y:active {
+  background-color: var(--vxe-ui-scrollbar-thumb-active-background-color);
+}