@sdata/web-vue 1.9.0 → 1.10.0

package/es/scrollbar/scrollbar.vue_vue_type_script_lang.js

@@ -1,17 +1,11 @@
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isObject } from "../_utils/is.js";
-import resize_observer_v2_default from "../_components/resize-observer-v2.js";
-import thumb_default from "./thumb.js";
-import { computed, defineComponent, onMounted, ref } from "vue";
+import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { OverlayScrollbars } from "overlayscrollbars";
 //#region components/scrollbar/scrollbar.vue?vue&type=script&lang.ts
-var THUMB_MIN_SIZE = 20;
-var TRACK_SIZE = 15;
 var scrollbar_vue_vue_type_script_lang_default = defineComponent({
 	name: "Scrollbar",
-	components: {
-		ResizeObserver: resize_observer_v2_default,
-		Thumb: thumb_default
-	},
 	inheritAttrs: false,
 	props: {
 		type: {
@@ -28,6 +22,19 @@ var scrollbar_vue_vue_type_script_lang_default = defineComponent({
 			Object,
 			Array
 		] },
+		paddingAbsolute: {
+			type: Boolean,
+			default: void 0
+		},
+		showNativeOverlaidScrollbars: {
+			type: Boolean,
+			default: void 0
+		},
+		updateOptions: { type: Object },
+		overflow: { type: Object },
+		scrollbars: { type: Object },
+		overlayOptions: { type: Object },
+		events: { type: Object },
 		hide: {
 			type: Boolean,
 			default: false
@@ -45,132 +52,189 @@ var scrollbar_vue_vue_type_script_lang_default = defineComponent({
 	setup(props, { emit }) {
 		const prefixCls = getPrefixCls("scrollbar");
 		const containerRef = ref();
-		const horizontalData = ref();
-		const verticalData = ref();
-		const horizontalThumbRef = ref();
-		const verticalThumbRef = ref();
-		const _hasHorizontalScrollbar = ref(false);
-		const _hasVerticalScrollbar = ref(false);
-		const hasHorizontalScrollbar = computed(() => _hasHorizontalScrollbar.value && !props.disableHorizontal);
-		const hasVerticalScrollbar = computed(() => _hasVerticalScrollbar.value && !props.disableVertical);
-		const isBoth = ref(false);
-		const getContainerSize = () => {
-			if (containerRef.value) {
-				const { clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, scrollTop, scrollLeft } = containerRef.value;
-				_hasHorizontalScrollbar.value = scrollWidth > clientWidth;
-				_hasVerticalScrollbar.value = scrollHeight > clientHeight;
-				isBoth.value = hasHorizontalScrollbar.value && hasVerticalScrollbar.value;
-				const horizontalTrackWidth = props.type === "embed" && isBoth.value ? offsetWidth - TRACK_SIZE : offsetWidth;
-				const verticalTrackHeight = props.type === "embed" && isBoth.value ? offsetHeight - TRACK_SIZE : offsetHeight;
-				const horizontalThumbWidth = Math.round(horizontalTrackWidth / Math.min(scrollWidth / clientWidth, horizontalTrackWidth / THUMB_MIN_SIZE));
-				const maxHorizontalOffset = horizontalTrackWidth - horizontalThumbWidth;
-				const horizontalRatio = (scrollWidth - clientWidth) / maxHorizontalOffset;
-				const verticalThumbHeight = Math.round(verticalTrackHeight / Math.min(scrollHeight / clientHeight, verticalTrackHeight / THUMB_MIN_SIZE));
-				const maxVerticalOffset = verticalTrackHeight - verticalThumbHeight;
-				const verticalRatio = (scrollHeight - clientHeight) / maxVerticalOffset;
-				horizontalData.value = {
-					ratio: horizontalRatio,
-					thumbSize: horizontalThumbWidth,
-					max: maxHorizontalOffset
-				};
-				verticalData.value = {
-					ratio: verticalRatio,
-					thumbSize: verticalThumbHeight,
-					max: maxVerticalOffset
-				};
-				if (scrollTop > 0) {
-					var _verticalData$value$r, _verticalData$value, _verticalThumbRef$val;
-					const verticalOffset = Math.round(scrollTop / ((_verticalData$value$r = (_verticalData$value = verticalData.value) === null || _verticalData$value === void 0 ? void 0 : _verticalData$value.ratio) !== null && _verticalData$value$r !== void 0 ? _verticalData$value$r : 1));
-					(_verticalThumbRef$val = verticalThumbRef.value) === null || _verticalThumbRef$val === void 0 || _verticalThumbRef$val.setOffset(verticalOffset);
-				}
-				if (scrollLeft > 0) {
-					var _verticalData$value$r2, _verticalData$value2, _horizontalThumbRef$v;
-					const horizontalOffset = Math.round(scrollLeft / ((_verticalData$value$r2 = (_verticalData$value2 = verticalData.value) === null || _verticalData$value2 === void 0 ? void 0 : _verticalData$value2.ratio) !== null && _verticalData$value$r2 !== void 0 ? _verticalData$value$r2 : 1));
-					(_horizontalThumbRef$v = horizontalThumbRef.value) === null || _horizontalThumbRef$v === void 0 || _horizontalThumbRef$v.setOffset(horizontalOffset);
-				}
-			}
+		const osInstanceRef = ref(null);
+		const removeExternalListenersRef = ref(null);
+		const resolveOSInstance = () => {
+			const osInstance = osInstanceRef.value;
+			if (!osInstance || osInstance.state().destroyed) return null;
+			return osInstance;
 		};
-		onMounted(() => {
-			getContainerSize();
-		});
-		const handleResize = () => {
-			getContainerSize();
+		const getScrollOffsetElement = () => {
+			var _osInstance$elements$;
+			const osInstance = resolveOSInstance();
+			if (!osInstance) return null;
+			return (_osInstance$elements$ = osInstance.elements().scrollOffsetElement) !== null && _osInstance$elements$ !== void 0 ? _osInstance$elements$ : null;
 		};
-		const handleScroll = (ev) => {
-			if (containerRef.value) {
-				if (hasHorizontalScrollbar.value && !props.disableHorizontal) {
-					var _horizontalData$value, _horizontalData$value2, _horizontalThumbRef$v2;
-					const horizontalOffset = Math.round(containerRef.value.scrollLeft / ((_horizontalData$value = (_horizontalData$value2 = horizontalData.value) === null || _horizontalData$value2 === void 0 ? void 0 : _horizontalData$value2.ratio) !== null && _horizontalData$value !== void 0 ? _horizontalData$value : 1));
-					(_horizontalThumbRef$v2 = horizontalThumbRef.value) === null || _horizontalThumbRef$v2 === void 0 || _horizontalThumbRef$v2.setOffset(horizontalOffset);
-				}
-				if (hasVerticalScrollbar.value && !props.disableVertical) {
-					var _verticalData$value$r3, _verticalData$value3, _verticalThumbRef$val2;
-					const verticalOffset = Math.round(containerRef.value.scrollTop / ((_verticalData$value$r3 = (_verticalData$value3 = verticalData.value) === null || _verticalData$value3 === void 0 ? void 0 : _verticalData$value3.ratio) !== null && _verticalData$value$r3 !== void 0 ? _verticalData$value$r3 : 1));
-					(_verticalThumbRef$val2 = verticalThumbRef.value) === null || _verticalThumbRef$val2 === void 0 || _verticalThumbRef$val2.setOffset(verticalOffset);
-				}
-			}
-			emit("scroll", ev);
+		const normalizeUpdateOptions = (update) => {
+			var _update$debounce$muta, _update$debounce$resi, _update$debounce$even, _update$debounce$env;
+			if (!(update === null || update === void 0 ? void 0 : update.debounce) || !isObject(update.debounce) || Array.isArray(update.debounce)) return update;
+			return _objectSpread2(_objectSpread2({}, update), {}, { debounce: {
+				mutation: (_update$debounce$muta = update.debounce.mutation) !== null && _update$debounce$muta !== void 0 ? _update$debounce$muta : 0,
+				resize: (_update$debounce$resi = update.debounce.resize) !== null && _update$debounce$resi !== void 0 ? _update$debounce$resi : 0,
+				event: (_update$debounce$even = update.debounce.event) !== null && _update$debounce$even !== void 0 ? _update$debounce$even : 0,
+				env: (_update$debounce$env = update.debounce.env) !== null && _update$debounce$env !== void 0 ? _update$debounce$env : 0
+			} });
 		};
-		const handleHorizontalScroll = (offset) => {
-			if (containerRef.value) {
-				var _horizontalData$value3, _horizontalData$value4;
-				containerRef.value.scrollTo({ left: offset * ((_horizontalData$value3 = (_horizontalData$value4 = horizontalData.value) === null || _horizontalData$value4 === void 0 ? void 0 : _horizontalData$value4.ratio) !== null && _horizontalData$value3 !== void 0 ? _horizontalData$value3 : 1) });
-			}
+		const mergedOptions = computed(() => {
+			var _props$overlayOptions, _props$paddingAbsolut, _props$showNativeOver, _props$updateOptions;
+			const optionProps = (_props$overlayOptions = props.overlayOptions) !== null && _props$overlayOptions !== void 0 ? _props$overlayOptions : {};
+			const isTrackType = props.type === "track";
+			let visibility = "auto";
+			if (props.hide) visibility = "hidden";
+			else if (isTrackType) visibility = "visible";
+			const autoHide = props.hide || isTrackType ? "never" : "leave";
+			const mergedOverflow = _objectSpread2(_objectSpread2({
+				x: "scroll",
+				y: "scroll"
+			}, optionProps.overflow), props.overflow);
+			if (props.disableHorizontal) mergedOverflow.x = "hidden";
+			if (props.disableVertical) mergedOverflow.y = "hidden";
+			return _objectSpread2(_objectSpread2({}, optionProps), {}, {
+				paddingAbsolute: (_props$paddingAbsolut = props.paddingAbsolute) !== null && _props$paddingAbsolut !== void 0 ? _props$paddingAbsolut : optionProps.paddingAbsolute,
+				showNativeOverlaidScrollbars: (_props$showNativeOver = props.showNativeOverlaidScrollbars) !== null && _props$showNativeOver !== void 0 ? _props$showNativeOver : optionProps.showNativeOverlaidScrollbars,
+				update: normalizeUpdateOptions((_props$updateOptions = props.updateOptions) !== null && _props$updateOptions !== void 0 ? _props$updateOptions : optionProps.update),
+				overflow: mergedOverflow,
+				scrollbars: _objectSpread2(_objectSpread2({
+					theme: props.type === "track" ? `${prefixCls}-theme-track` : `${prefixCls}-theme-embed`,
+					visibility,
+					autoHide,
+					autoHideSuspend: true,
+					clickScroll: "instant"
+				}, optionProps.scrollbars), props.scrollbars)
+			});
+		});
+		const bindExternalListeners = (eventListeners) => {
+			var _removeExternalListen;
+			(_removeExternalListen = removeExternalListenersRef.value) === null || _removeExternalListen === void 0 || _removeExternalListen.call(removeExternalListenersRef);
+			removeExternalListenersRef.value = null;
+			const osInstance = resolveOSInstance();
+			if (!osInstance || !eventListeners) return;
+			removeExternalListenersRef.value = osInstance.on(eventListeners);
 		};
-		const handleVerticalScroll = (offset) => {
-			if (containerRef.value) {
-				var _verticalData$value$r4, _verticalData$value4;
-				containerRef.value.scrollTo({ top: offset * ((_verticalData$value$r4 = (_verticalData$value4 = verticalData.value) === null || _verticalData$value4 === void 0 ? void 0 : _verticalData$value4.ratio) !== null && _verticalData$value$r4 !== void 0 ? _verticalData$value$r4 : 1) });
-			}
+		const outerStyle = computed(() => props.outerStyle);
+		const cls = computed(() => [
+			`${prefixCls}`,
+			`${prefixCls}-type-${props.type}`,
+			props.outerClass
+		]);
+		const initScrollbar = () => {
+			if (!containerRef.value) return;
+			osInstanceRef.value = OverlayScrollbars(containerRef.value, mergedOptions.value, { scroll: (_instance, event) => {
+				emit("scroll", event);
+			} });
+			bindExternalListeners(props.events);
 		};
-		const style = computed(() => {
-			const style = {};
-			if (props.type === "track") {
-				if (hasHorizontalScrollbar.value) style.paddingBottom = `${TRACK_SIZE}px`;
-				if (hasVerticalScrollbar.value) style.paddingRight = `${TRACK_SIZE}px`;
-			}
-			return [style, props.outerStyle];
+		onMounted(() => {
+			initScrollbar();
+		});
+		watch(mergedOptions, (options) => {
+			const osInstance = resolveOSInstance();
+			if (!osInstance) return;
+			osInstance.options(options);
+		}, { deep: true });
+		watch(() => props.events, (eventListeners) => {
+			bindExternalListeners(eventListeners);
+		}, { deep: true });
+		onBeforeUnmount(() => {
+			var _removeExternalListen2, _osInstanceRef$value;
+			(_removeExternalListen2 = removeExternalListenersRef.value) === null || _removeExternalListen2 === void 0 || _removeExternalListen2.call(removeExternalListenersRef);
+			removeExternalListenersRef.value = null;
+			(_osInstanceRef$value = osInstanceRef.value) === null || _osInstanceRef$value === void 0 || _osInstanceRef$value.destroy();
+			osInstanceRef.value = null;
 		});
 		return {
 			prefixCls,
-			cls: computed(() => [
-				`${prefixCls}`,
-				`${prefixCls}-type-${props.type}`,
-				{ [`${prefixCls}-both`]: isBoth.value },
-				props.outerClass
-			]),
-			style,
+			cls,
+			outerStyle,
 			containerRef,
-			horizontalThumbRef,
-			verticalThumbRef,
-			horizontalData,
-			verticalData,
-			isBoth,
-			hasHorizontalScrollbar,
-			hasVerticalScrollbar,
-			handleResize,
-			handleScroll,
-			handleHorizontalScroll,
-			handleVerticalScroll
+			mergedOptions,
+			resolveOSInstance,
+			getScrollOffsetElement
 		};
 	},
 	methods: {
+		getOSInstance() {
+			return this.resolveOSInstance();
+		},
+		options(newOptions, pure) {
+			const osInstance = this.getOSInstance();
+			if (!osInstance) return;
+			if (typeof newOptions === "undefined") return osInstance.options();
+			return osInstance.options(newOptions, pure);
+		},
+		on(nameOrListeners, listenerOrPure) {
+			const osInstance = this.getOSInstance();
+			if (!osInstance) return;
+			if (isObject(nameOrListeners)) return osInstance.on(nameOrListeners, listenerOrPure);
+			if (Array.isArray(listenerOrPure)) return osInstance.on(nameOrListeners, listenerOrPure);
+			return osInstance.on(nameOrListeners, listenerOrPure);
+		},
+		off(name, listener) {
+			const osInstance = this.getOSInstance();
+			if (!osInstance) return;
+			if (Array.isArray(listener)) {
+				osInstance.off(name, listener);
+				return;
+			}
+			osInstance.off(name, listener);
+		},
+		update(force) {
+			var _this$getOSInstance$u, _this$getOSInstance;
+			return (_this$getOSInstance$u = (_this$getOSInstance = this.getOSInstance()) === null || _this$getOSInstance === void 0 ? void 0 : _this$getOSInstance.update(force)) !== null && _this$getOSInstance$u !== void 0 ? _this$getOSInstance$u : false;
+		},
+		sleep(sleeping) {
+			var _this$getOSInstance2;
+			(_this$getOSInstance2 = this.getOSInstance()) === null || _this$getOSInstance2 === void 0 || _this$getOSInstance2.sleep(sleeping);
+		},
+		state() {
+			var _this$getOSInstance3;
+			return (_this$getOSInstance3 = this.getOSInstance()) === null || _this$getOSInstance3 === void 0 ? void 0 : _this$getOSInstance3.state();
+		},
+		elements() {
+			var _this$getOSInstance4;
+			return (_this$getOSInstance4 = this.getOSInstance()) === null || _this$getOSInstance4 === void 0 ? void 0 : _this$getOSInstance4.elements();
+		},
+		plugin(osPlugin) {
+			var _this$getOSInstance5;
+			return (_this$getOSInstance5 = this.getOSInstance()) === null || _this$getOSInstance5 === void 0 ? void 0 : _this$getOSInstance5.plugin(osPlugin);
+		},
+		destroy() {
+			const osInstance = this.getOSInstance();
+			if (!osInstance) return;
+			osInstance.destroy();
+		},
 		scrollTo(options, y) {
+			const scrollOffsetElement = this.getScrollOffsetElement();
+			if (!scrollOffsetElement || !("scrollTop" in scrollOffsetElement)) return;
+			const canUseNativeScrollTo = typeof scrollOffsetElement.scrollTo === "function";
 			if (isObject(options)) {
-				var _this$$refs$container;
-				(_this$$refs$container = this.$refs.containerRef) === null || _this$$refs$container === void 0 || _this$$refs$container.scrollTo(options);
-			} else if (options || y) {
-				var _this$$refs$container2;
-				(_this$$refs$container2 = this.$refs.containerRef) === null || _this$$refs$container2 === void 0 || _this$$refs$container2.scrollTo(options, y);
+				if (canUseNativeScrollTo) {
+					scrollOffsetElement.scrollTo(options);
+					return;
+				}
+				if (typeof options.top === "number") scrollOffsetElement.scrollTop = options.top;
+				if (typeof options.left === "number") scrollOffsetElement.scrollLeft = options.left;
+				return;
+			}
+			if (typeof options !== "number" && typeof y !== "number") return;
+			if (canUseNativeScrollTo) {
+				scrollOffsetElement.scrollTo(typeof options === "number" ? options : scrollOffsetElement.scrollLeft, typeof y === "number" ? y : scrollOffsetElement.scrollTop);
+				return;
 			}
+			if (typeof options === "number") scrollOffsetElement.scrollLeft = options;
+			if (typeof y === "number") scrollOffsetElement.scrollTop = y;
 		},
 		scrollTop(top) {
-			var _this$$refs$container3;
-			(_this$$refs$container3 = this.$refs.containerRef) === null || _this$$refs$container3 === void 0 || _this$$refs$container3.scrollTo({ top });
+			const scrollOffsetElement = this.getScrollOffsetElement();
+			if (!scrollOffsetElement || !("scrollTop" in scrollOffsetElement)) return;
+			if (typeof scrollOffsetElement.scrollTo === "function") scrollOffsetElement.scrollTo({ top });
+			else scrollOffsetElement.scrollTop = top;
 		},
 		scrollLeft(left) {
-			var _this$$refs$container4;
-			(_this$$refs$container4 = this.$refs.containerRef) === null || _this$$refs$container4 === void 0 || _this$$refs$container4.scrollTo({ left });
+			const scrollOffsetElement = this.getScrollOffsetElement();
+			if (!scrollOffsetElement || !("scrollLeft" in scrollOffsetElement)) return;
+			if (typeof scrollOffsetElement.scrollTo === "function") scrollOffsetElement.scrollTo({ left });
+			else scrollOffsetElement.scrollLeft = left;
 		}
 	}
 });

package/es/scrollbar/style/index.css

@@ -17,93 +17,50 @@
 /********* icon hover *********/
 .sd-scrollbar {
   position: relative;
-}
-.sd-scrollbar-container {
-  position: relative;
-  scrollbar-width: none;
-}
-.sd-scrollbar-container::-webkit-scrollbar {
-  display: none;
-}
-.sd-scrollbar-track {
-  position: absolute;
-  z-index: 100;
-}
-.sd-scrollbar-track-direction-horizontal {
-  bottom: 0;
-  left: 0;
-  box-sizing: border-box;
-  width: 100%;
-  height: 15px;
-}
-.sd-scrollbar-track-direction-vertical {
-  top: 0;
-  right: 0;
-  box-sizing: border-box;
-  width: 15px;
-  height: 100%;
-}
-.sd-scrollbar-thumb {
-  position: absolute;
-  display: block;
-  box-sizing: border-box;
-}
-.sd-scrollbar-thumb-bar {
   width: 100%;
   height: 100%;
-  background-color: var(--color-neutral-4);
-  border-radius: 6px;
-}
-.sd-scrollbar-thumb:hover .sd-scrollbar-thumb-bar, .sd-scrollbar-thumb-dragging .sd-scrollbar-thumb-bar {
-  background-color: var(--color-neutral-6);
 }
-.sd-scrollbar-thumb-direction-horizontal .sd-scrollbar-thumb-bar {
-  height: 9px;
-  margin: 3px 0;
-}
-.sd-scrollbar-thumb-direction-vertical .sd-scrollbar-thumb-bar {
-  width: 9px;
-  margin: 0 3px;
-}
-.sd-scrollbar.sd-scrollbar-type-embed .sd-scrollbar-thumb {
-  opacity: 0;
-}
-.sd-scrollbar.sd-scrollbar-type-embed .sd-scrollbar-thumb-dragging {
-  opacity: 0.8;
-}
-.sd-scrollbar.sd-scrollbar-type-embed .sd-scrollbar-thumb {
-  transition: opacity ease 200ms;
-}
-.sd-scrollbar.sd-scrollbar-type-embed:hover .sd-scrollbar-thumb {
-  opacity: 0.8;
-}
-.sd-scrollbar.sd-scrollbar-type-track .sd-scrollbar-track {
-  background-color: var(--color-neutral-1);
-}
-.sd-scrollbar.sd-scrollbar-type-track .sd-scrollbar-track-direction-horizontal {
-  border-top: 1px solid var(--color-neutral-3);
-  border-bottom: 1px solid var(--color-neutral-3);
-}
-.sd-scrollbar.sd-scrollbar-type-track .sd-scrollbar-track-direction-vertical {
-  border-right: 1px solid var(--color-neutral-3);
-  border-left: 1px solid var(--color-neutral-3);
-}
-.sd-scrollbar.sd-scrollbar-type-track .sd-scrollbar-thumb-direction-horizontal {
-  margin: -1px 0;
-}
-.sd-scrollbar.sd-scrollbar-type-track .sd-scrollbar-thumb-direction-vertical {
-  margin: 0 -1px;
-}
-.sd-scrollbar.sd-scrollbar-type-track.sd-scrollbar-both .sd-scrollbar-track-direction-vertical::after {
-  position: absolute;
-  right: -1px;
-  bottom: 0;
-  display: block;
-  box-sizing: border-box;
-  width: 15px;
-  height: 15px;
-  background-color: var(--color-neutral-1);
-  border-right: 1px solid var(--color-neutral-3);
-  border-bottom: 1px solid var(--color-neutral-3);
-  content: "";
+.sd-scrollbar-container {
+  min-width: 100%;
+  min-height: 100%;
+}
+.sd-scrollbar .os-scrollbar {
+  --os-size: 6px;
+  --os-handle-bg: var(--color-neutral-4);
+  --os-handle-bg-hover: var(--color-neutral-5);
+  --os-handle-bg-active: var(--color-neutral-6);
+  --os-track-bg: transparent;
+  --os-track-bg-hover: transparent;
+  --os-track-bg-active: transparent;
+  --os-padding-axis: 0;
+  --os-padding-perpendicular: 0;
+  --os-handle-border-radius: 6px;
+}
+.sd-scrollbar .os-scrollbar-handle {
+  transition: background-color 0.16s ease, opacity 0.16s ease;
+}
+.sd-scrollbar .sd-scrollbar-theme-embed {
+  --os-handle-perpendicular-size: 6px;
+  --os-handle-perpendicular-size-hover: 6px;
+  --os-handle-perpendicular-size-active: 6px;
+  --os-handle-interactive-area-offset: 0;
+}
+.sd-scrollbar .sd-scrollbar-theme-track {
+  --os-size: 6px;
+  --os-track-bg: var(--color-neutral-1);
+  --os-track-bg-hover: var(--color-neutral-1);
+  --os-track-bg-active: var(--color-neutral-1);
+  --os-track-border: 1px solid var(--color-neutral-3);
+  --os-handle-perpendicular-size: 6px;
+  --os-padding-axis: -1px;
+}
+.sd-scrollbar.sd-scrollbar-type-embed .sd-scrollbar-theme-embed {
+  --os-handle-bg: var(--color-neutral-4);
+  --os-handle-bg-hover: var(--color-neutral-5);
+  --os-handle-bg-active: var(--color-neutral-6);
+}
+.sd-scrollbar.sd-scrollbar-type-track .sd-scrollbar-theme-track {
+  --os-handle-bg: var(--color-neutral-4);
+  --os-handle-bg-hover: var(--color-neutral-5);
+  --os-handle-bg-active: var(--color-neutral-6);
 }

package/es/scrollbar/style/index.d.ts

@@ -1,2 +1,3 @@
+import 'overlayscrollbars/overlayscrollbars.css';
 import '../../style/index.scss';
 import './index.scss';

package/es/scrollbar/style/index.scss

@@ -6,128 +6,64 @@ $scroll-prefix-cls: string.unquote('#{theme.$prefix}-scrollbar');
 
 .#{$scroll-prefix-cls} {
   position: relative;
+  width: 100%;
+  height: 100%;
 
   &-container {
-    position: relative;
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
+    min-width: 100%;
+    min-height: 100%;
   }
 
-  &-track {
-    position: absolute;
-    z-index: 100;
-
-    &-direction-horizontal {
-      bottom: 0;
-      left: 0;
-      box-sizing: border-box;
-      width: 100%;
-      height: $scrollbar-track-size;
-    }
-
-    &-direction-vertical {
-      top: 0;
-      right: 0;
-      box-sizing: border-box;
-      width: $scrollbar-track-size;
-      height: 100%;
-    }
+  .os-scrollbar {
+    --os-size: #{$scrollbar-thumb-bar-size};
+    --os-handle-bg: #{$scrollbar-thumb-bar-bg_color};
+    --os-handle-bg-hover: #{$scrollbar-thumb-bar-bg_color_hover};
+    --os-handle-bg-active: #{$scrollbar-thumb-bar-bg_color_active};
+    --os-track-bg: transparent;
+    --os-track-bg-hover: transparent;
+    --os-track-bg-active: transparent;
+    --os-padding-axis: 0;
+    --os-padding-perpendicular: 0;
+    --os-handle-border-radius: #{$scrollbar-thumb-bar-border_radius};
   }
 
-  &-thumb {
-    position: absolute;
-    display: block;
-    box-sizing: border-box;
-
-    &-bar {
-      width: 100%;
-      height: 100%;
-      background-color: $scrollbar-thumb-bar-bg_color;
-      border-radius: $scrollbar-thumb-bar-border_radius;
-    }
-
-    &:hover,
-    &-dragging {
-      .#{$scroll-prefix-cls}-thumb-bar {
-        background-color: $scrollbar-thumb-bar-bg_color_hover;
-      }
-    }
+  .os-scrollbar-handle {
+    transition:
+      background-color 0.16s ease,
+      opacity 0.16s ease;
+  }
 
-    &-direction-horizontal {
-      .#{$scroll-prefix-cls}-thumb-bar {
-        height: $scrollbar-thumb-bar-size;
-        margin: (($scrollbar-track-size - $scrollbar-thumb-bar-size) * 0.5) 0;
-      }
-    }
+  .#{$scroll-prefix-cls}-theme-embed {
+    --os-handle-perpendicular-size: #{$scrollbar-thumb-bar-size};
+    --os-handle-perpendicular-size-hover: #{$scrollbar-thumb-bar-size};
+    --os-handle-perpendicular-size-active: #{$scrollbar-thumb-bar-size};
+    --os-handle-interactive-area-offset: 0;
+  }
 
-    &-direction-vertical {
-      .#{$scroll-prefix-cls}-thumb-bar {
-        width: $scrollbar-thumb-bar-size;
-        margin: 0 (($scrollbar-track-size - $scrollbar-thumb-bar-size) * 0.5);
-      }
-    }
+  .#{$scroll-prefix-cls}-theme-track {
+    --os-size: #{$scrollbar-track-size};
+    --os-track-bg: #{$scrollbar-track-bg_color};
+    --os-track-bg-hover: #{$scrollbar-track-bg_color};
+    --os-track-bg-active: #{$scrollbar-track-bg_color};
+    --os-track-border: #{$scrollbar-track-border_size} solid #{$scrollbar-track-border_color};
+    --os-handle-perpendicular-size: #{$scrollbar-thumb-bar-size};
+    --os-padding-axis: #{($scrollbar-track-size - $scrollbar-thumb-bar-size) * 0.5 -
+      $scrollbar-track-border_size};
   }
 
   &#{&}-type-embed {
-    .#{$scroll-prefix-cls}-thumb {
-      opacity: 0;
-
-      &-dragging {
-        opacity: 0.8;
-      }
-
-      transition: opacity ease 200ms;
-    }
-
-    &:hover {
-      .#{$scroll-prefix-cls}-thumb {
-        opacity: 0.8;
-      }
+    .#{$scroll-prefix-cls}-theme-embed {
+      --os-handle-bg: #{$scrollbar-thumb-bar-bg_color};
+      --os-handle-bg-hover: #{$scrollbar-thumb-bar-bg_color_hover};
+      --os-handle-bg-active: #{$scrollbar-thumb-bar-bg_color_active};
     }
   }
 
   &#{&}-type-track {
-    .#{$scroll-prefix-cls}-track {
-      background-color: $scrollbar-track-bg_color;
-
-      &-direction-horizontal {
-        border-top: $scrollbar-track-border_size solid $scrollbar-track-border_color;
-        border-bottom: $scrollbar-track-border_size solid $scrollbar-track-border_color;
-      }
-
-      &-direction-vertical {
-        border-right: $scrollbar-track-border_size solid $scrollbar-track-border_color;
-        border-left: $scrollbar-track-border_size solid $scrollbar-track-border_color;
-      }
-    }
-
-    .#{$scroll-prefix-cls}-thumb {
-      &-direction-horizontal {
-        margin: -$scrollbar-track-border_size 0;
-      }
-
-      &-direction-vertical {
-        margin: 0 (-$scrollbar-track-border_size);
-      }
-    }
-
-    &.#{$scroll-prefix-cls}-both {
-      .#{$scroll-prefix-cls}-track-direction-vertical::after {
-        position: absolute;
-        right: -$scrollbar-track-border_size;
-        bottom: 0;
-        display: block;
-        box-sizing: border-box;
-        width: $scrollbar-track-size;
-        height: $scrollbar-track-size;
-        background-color: $scrollbar-track-bg_color;
-        border-right: $scrollbar-track-border_size solid $scrollbar-track-border_color;
-        border-bottom: $scrollbar-track-border_size solid $scrollbar-track-border_color;
-        content: '';
-      }
+    .#{$scroll-prefix-cls}-theme-track {
+      --os-handle-bg: #{$scrollbar-thumb-bar-bg_color};
+      --os-handle-bg-hover: #{$scrollbar-thumb-bar-bg_color_hover};
+      --os-handle-bg-active: #{$scrollbar-thumb-bar-bg_color_active};
     }
   }
 }