@vnejs/uis.react.scrollbar 0.1.2 → 0.1.4

package/dist/Scrollbar.d.ts

@@ -1,4 +1,3 @@
-import "./Scrollbar.styl";
 export declare const Scrollbar: ({ className, children, width, height, scrollTo, scrollToEnd, hideScrolbars, disableScroll, wrapRef, textSize, }: {
     className?: string;
     children: any;

package/dist/Scrollbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../src/Scrollbar.tsx"],"names":[],"mappings":"AASA,OAAO,kBAAkB,CAAC;AAa1B,eAAO,MAAM,SAAS,GAAI;;;;;;;;;;;CAWzB,4CA2DA,CAAC"}
+{"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../src/Scrollbar.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,SAAS,GAAI;;;;;;;;;;;CAWzB,4CA2DA,CAAC"}

package/dist/Scrollbar.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo } from "react";
-import { cn, getVneLength } from "@vnejs/uis.utils";
+import { getVneLength } from "@vnejs/uis.utils";
 import { useThumbHook } from "./hooks/thumb.hook";
 import { useScrollHook } from "./hooks/scroll.hook";
 import { useScrollToHook } from "./hooks/scroll-to.hook";
 import { useRefForScrollHook } from "./hooks/ref.hook";
-import "./Scrollbar.styl";
-const b = cn("Scrollbar");
+import { b } from "./Scrollbar.styles.js";
 const renderScroll = (thumbRef, isVisible, isHorizontal, isVertical) => (_jsx("div", { className: b("scroll", { isVisible, isHorizontal, isVertical }), children: _jsx("div", { className: b("thumb", { isHorizontal, isVertical }), ref: thumbRef }) }));
 export const Scrollbar = ({ className = "", children, width = 0, height = 0, scrollTo = 0, scrollToEnd = false, hideScrolbars = false, disableScroll = false, wrapRef = null, textSize = null, }) => {
     const { scrollbarWrapRef, scrollbarChildrenRef, thumbHorizontalRef, thumbVerticalRef } = useRefForScrollHook();

package/dist/Scrollbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollbar.js","sourceRoot":"","sources":["../src/Scrollbar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Scrollbar.js","sourceRoot":"","sources":["../src/Scrollbar.tsx"],"names":[],"mappings":"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"}

package/dist/Scrollbar.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const b: (...args: any[]) => string;
+//# sourceMappingURL=Scrollbar.styles.d.ts.map

package/dist/Scrollbar.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.styles.d.ts","sourceRoot":"","sources":["../src/Scrollbar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,CAAC,4BAAkB,CAAC"}

package/dist/Scrollbar.styles.js

@@ -0,0 +1,62 @@
+import { cn, getVneLength, injectStyles, sel } from "@vnejs/uis.utils";
+export const b = cn("Scrollbar");
+const CSS = `
+${sel(b())} {
+  --vne-scrollbar-color-vertical: var(--vne-color-disabled, rgba(255, 255, 255, 30%));
+  --vne-scrollbar-color-horizontal: var(--vne-color-disabled, rgba(255, 255, 255, 30%));
+  --vne-scrollbar-color-thumb: var(--vne-color-selected, rgba(255, 255, 255, 75%));
+  display: block;
+  position: relative;
+}
+
+${sel(b("wrap"))} {
+  scrollbar-width: none;
+}
+
+${sel(b("scroll"))} {
+  position: absolute;
+  transition: 1000ms;
+  border-radius: ${getVneLength(8)};
+  opacity: 0;
+}
+
+${sel(b("thumb"))} {
+  position: absolute;
+  background: var(--vne-scrollbar-color-thumb);
+  border-radius: ${getVneLength(12)};
+}
+
+${sel(b("scroll", { isVertical: true }))} {
+  right: ${getVneLength(-24)};
+  top: 0;
+  bottom: ${getVneLength(36)};
+  width: ${getVneLength(12)};
+  background: var(--vne-scrollbar-color-vertical);
+}
+
+${sel(b("thumb", { isVertical: true }))} {
+  right: ${getVneLength(-6)};
+  width: ${getVneLength(24)};
+  height: ${getVneLength(96)};
+}
+
+${sel(b("scroll", { isHorizontal: true }))} {
+  bottom: ${getVneLength(-24)};
+  left: 0;
+  right: ${getVneLength(36)};
+  height: ${getVneLength(12)};
+  background: var(--vne-scrollbar-color-horizontal);
+}
+
+${sel(b("thumb", { isHorizontal: true }))} {
+  top: ${getVneLength(-6)};
+  width: ${getVneLength(96)};
+  height: ${getVneLength(24)};
+}
+
+${sel(b("scroll", { isVisible: true }))} {
+  opacity: 1;
+}
+`;
+injectStyles(CSS);
+//# sourceMappingURL=Scrollbar.styles.js.map

package/dist/Scrollbar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.styles.js","sourceRoot":"","sources":["../src/Scrollbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvE,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC;AAEjC,MAAM,GAAG,GAAG;EACV,GAAG,CAAC,CAAC,EAAE,CAAC;;;;;;;;EAQR,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;;;;EAId,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;;;mBAGC,YAAY,CAAC,CAAC,CAAC;;;;EAIhC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;;;mBAGE,YAAY,CAAC,EAAE,CAAC;;;EAGjC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;WAC7B,YAAY,CAAC,CAAC,EAAE,CAAC;;YAEhB,YAAY,CAAC,EAAE,CAAC;WACjB,YAAY,CAAC,EAAE,CAAC;;;;EAIzB,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;WAC5B,YAAY,CAAC,CAAC,CAAC,CAAC;WAChB,YAAY,CAAC,EAAE,CAAC;YACf,YAAY,CAAC,EAAE,CAAC;;;EAG1B,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;YAC9B,YAAY,CAAC,CAAC,EAAE,CAAC;;WAElB,YAAY,CAAC,EAAE,CAAC;YACf,YAAY,CAAC,EAAE,CAAC;;;;EAI1B,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;SAChC,YAAY,CAAC,CAAC,CAAC,CAAC;WACd,YAAY,CAAC,EAAE,CAAC;YACf,YAAY,CAAC,EAAE,CAAC;;;EAG1B,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;;;CAGtC,CAAC;AAEF,YAAY,CAAC,GAAG,CAAC,CAAC"}

package/package.json

@@ -1,31 +1,26 @@
 {
   "name": "@vnejs/uis.react.scrollbar",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "node ../../scripts/build-package.mjs",
-    "publish:major:plugin": "npm run publish:major",
-    "publish:minor:plugin": "npm run publish:minor",
-    "publish:patch:plugin": "npm run publish:patch",
-    "publish:major": "npm run build && npm version major && npm publish --access public",
-    "publish:minor": "npm run build && npm version minor && npm publish --access public",
-    "publish:patch": "npm run build && npm version patch && npm publish --access public"
+    "build": "npx @vnejs/monorepo package",
+    "publish:major:uis:react": "npm run publish:major",
+    "publish:minor:uis:react": "npm run publish:minor",
+    "publish:patch:uis:react": "npm run publish:patch",
+    "publish:major": "npx @vnejs/monorepo publish major --access public",
+    "publish:minor": "npx @vnejs/monorepo publish minor --access public",
+    "publish:patch": "npx @vnejs/monorepo publish patch --access public"
   },
   "peerDependencies": {
-    "@bem-react/classname": "1.5.12",
-    "@vnejs/uis.utils": "~0.1.0",
-    "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "@vnejs/uis.utils": "~0.1.0"
   },
   "devDependencies": {
-    "@vnejs/uis.react": "~0.1.0",
-    "typescript": "^5.7.3",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4"
+    "@vnejs/uis.react": "~0.1.0"
   },
   "files": [
     "dist",
-    "package.json"
+    "src",
+    "tsconfig.json"
   ]
 }

package/src/Scrollbar.stories.tsx

@@ -0,0 +1,49 @@
+import { renderWithVneWrap, VneWrap } from "@vnejs/uis.react";
+
+import { Text, Scrollbar, Flex } from "@vnejs/uis.react";
+
+export const Common = {
+  args: {
+    ...VneWrap.DEFAULT_ARGS,
+    textCount: 6,
+
+    activeIndex: 0,
+    size: 48,
+    width: 600,
+    height: 600,
+  },
+};
+
+export default {
+  title: "Primitives/Scrollbar",
+  render: renderWithVneWrap(({ textCount, height, width, size, activeIndex }) => (
+    <Scrollbar
+      height={height}
+      width={width}
+      scrollTo={activeIndex}
+    >
+      {Array.from({ length: textCount }, (_, index) => index).map((i) => (
+        <Text
+          key={i}
+          isActive={i === activeIndex}
+          size={size}
+          text="text text text text"
+          whiteSpace="nowrap"
+        />
+      ))}
+    </Scrollbar>
+  )),
+  argTypes: {
+    // engine
+    ...VneWrap.ARGS,
+
+    // scrollbar
+    width: { control: { type: "number", min: 240, max: 900, step: 30 } },
+    height: { control: { type: "number", min: 240, max: 900, step: 30 } },
+    activeIndex: { control: { type: "number", min: 0, max: 12, step: 1 } },
+
+    // text
+    textCount: { control: { type: "number", min: 3, max: 12, step: 1 } },
+    size: { control: { type: "number", min: 24, max: 180, step: 6 } },
+  },
+};

package/src/Scrollbar.styles.ts

@@ -0,0 +1,64 @@
+import { cn, getVneLength, injectStyles, sel } from "@vnejs/uis.utils";
+
+export const b = cn("Scrollbar");
+
+const CSS = `
+${sel(b())} {
+  --vne-scrollbar-color-vertical: var(--vne-color-disabled, rgba(255, 255, 255, 30%));
+  --vne-scrollbar-color-horizontal: var(--vne-color-disabled, rgba(255, 255, 255, 30%));
+  --vne-scrollbar-color-thumb: var(--vne-color-selected, rgba(255, 255, 255, 75%));
+  display: block;
+  position: relative;
+}
+
+${sel(b("wrap"))} {
+  scrollbar-width: none;
+}
+
+${sel(b("scroll"))} {
+  position: absolute;
+  transition: 1000ms;
+  border-radius: ${getVneLength(8)};
+  opacity: 0;
+}
+
+${sel(b("thumb"))} {
+  position: absolute;
+  background: var(--vne-scrollbar-color-thumb);
+  border-radius: ${getVneLength(12)};
+}
+
+${sel(b("scroll", { isVertical: true }))} {
+  right: ${getVneLength(-24)};
+  top: 0;
+  bottom: ${getVneLength(36)};
+  width: ${getVneLength(12)};
+  background: var(--vne-scrollbar-color-vertical);
+}
+
+${sel(b("thumb", { isVertical: true }))} {
+  right: ${getVneLength(-6)};
+  width: ${getVneLength(24)};
+  height: ${getVneLength(96)};
+}
+
+${sel(b("scroll", { isHorizontal: true }))} {
+  bottom: ${getVneLength(-24)};
+  left: 0;
+  right: ${getVneLength(36)};
+  height: ${getVneLength(12)};
+  background: var(--vne-scrollbar-color-horizontal);
+}
+
+${sel(b("thumb", { isHorizontal: true }))} {
+  top: ${getVneLength(-6)};
+  width: ${getVneLength(96)};
+  height: ${getVneLength(24)};
+}
+
+${sel(b("scroll", { isVisible: true }))} {
+  opacity: 1;
+}
+`;
+
+injectStyles(CSS);

package/src/Scrollbar.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useMemo } from "react";
+
+import { getVneLength } from "@vnejs/uis.utils";
+
+import { useThumbHook } from "./hooks/thumb.hook";
+import { useScrollHook } from "./hooks/scroll.hook";
+import { useScrollToHook } from "./hooks/scroll-to.hook";
+import { useRefForScrollHook } from "./hooks/ref.hook";
+
+import { b } from "./Scrollbar.styles.js";
+
+const renderScroll = (thumbRef, isVisible, isHorizontal, isVertical) => (
+  <div className={b("scroll", { isVisible, isHorizontal, isVertical })}>
+    <div
+      className={b("thumb", { isHorizontal, isVertical })}
+      ref={thumbRef}
+    />
+  </div>
+);
+
+export const Scrollbar = ({
+  className = "",
+  children,
+  width = 0,
+  height = 0,
+  scrollTo = 0,
+  scrollToEnd = false,
+  hideScrolbars = false,
+  disableScroll = false,
+  wrapRef = null,
+  textSize = null,
+}) => {
+  const { scrollbarWrapRef, scrollbarChildrenRef, thumbHorizontalRef, thumbVerticalRef } = useRefForScrollHook();
+  const { shouldRenderHorizontal, shouldRenderVertical } = useScrollHook(scrollbarWrapRef, scrollbarChildrenRef, width, height, textSize);
+
+  useThumbHook(scrollbarWrapRef, thumbVerticalRef, thumbHorizontalRef);
+  useScrollToHook(scrollTo, scrollToEnd, scrollbarWrapRef, scrollbarChildrenRef);
+
+  const style = useMemo(() => {
+    const result: Record<string, any> = {};
+
+    if (width) result.width = getVneLength(width);
+    if (height) result.height = getVneLength(height);
+
+    return result;
+  }, [width, height]);
+
+  const styleWrap = useMemo(() => {
+    const result: Record<string, any> = {};
+
+    if (disableScroll) {
+      result.overflowX = "hidden";
+      result.overflowY = "hidden";
+    } else {
+      if (shouldRenderHorizontal) result.overflowX = "auto";
+      if (shouldRenderVertical) result.overflowY = "auto";
+    }
+
+    if (width) result.maxWidth = getVneLength(width);
+    if (height) result.maxHeight = getVneLength(height);
+
+    return result;
+  }, [width, height, scrollbarWrapRef.current, shouldRenderHorizontal, shouldRenderVertical, disableScroll]);
+
+  useEffect(() => {
+    if (wrapRef) wrapRef.current = scrollbarWrapRef.current;
+  }, [wrapRef, scrollbarWrapRef.current]);
+
+  return (
+    <div
+      className={b({}, [className])}
+      style={style}
+    >
+      {!hideScrolbars && renderScroll(thumbHorizontalRef, shouldRenderHorizontal, true, false)}
+      {!hideScrolbars && renderScroll(thumbVerticalRef, shouldRenderVertical, false, true)}
+
+      <div
+        className={b("wrap")}
+        ref={scrollbarWrapRef}
+        style={styleWrap}
+      >
+        <div
+          className={b("children")}
+          ref={scrollbarChildrenRef}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/hooks/ref.hook.ts

@@ -0,0 +1,11 @@
+import { useRef } from "react";
+
+export const useRefForScrollHook = () => {
+  const scrollbarWrapRef = useRef(null);
+  const scrollbarChildrenRef = useRef(null);
+
+  const thumbVerticalRef = useRef(null);
+  const thumbHorizontalRef = useRef(null);
+
+  return { scrollbarWrapRef, scrollbarChildrenRef, thumbVerticalRef, thumbHorizontalRef };
+};

package/src/hooks/scroll-to.hook.ts

@@ -0,0 +1,34 @@
+import { useEffect } from "react";
+
+export const useScrollToHook = (scrollTo, scrollToEnd, scrollbarWrapRef, scrollbarChildrenRef) => {
+  useEffect(() => {
+    if (!scrollTo) return;
+
+    const children = [...scrollbarChildrenRef.current.children];
+
+    if (children[scrollTo]) {
+      const element = children[scrollTo];
+
+      if (
+        scrollbarWrapRef.current.scrollTop > element.offsetTop ||
+        scrollbarWrapRef.current.scrollTop + scrollbarWrapRef.current.clientHeight < element.offsetTop + element.clientHeight ||
+        scrollbarWrapRef.current.scrollLeft > element.offsetleft ||
+        scrollbarWrapRef.current.scrollleft + scrollbarWrapRef.current.clientWidth < element.offsetleft + element.clientWidth
+      )
+        element.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [scrollTo, scrollbarWrapRef.current]);
+  useEffect(() => {
+    if (!scrollToEnd) return;
+
+    const scrollToBottom = () => scrollbarChildrenRef?.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+
+    const resizeObserver = new ResizeObserver(() => {
+      setTimeout(scrollToBottom, 100);
+    });
+
+    resizeObserver.observe(scrollbarChildrenRef.current);
+
+    return () => resizeObserver.disconnect();
+  }, [scrollToEnd, scrollbarWrapRef.current]);
+};

package/src/hooks/scroll.hook.ts

@@ -0,0 +1,57 @@
+import { useCallback, useEffect, useState } from "react";
+
+export const useScrollHook = (scrollbarWrapRef, scrollbarChildrenRef, width, height, textSize) => {
+  const [shouldRenderHorizontal, setShouldRenderHorizontal] = useState(false);
+  const [shouldRenderVertical, setShouldRenderVertical] = useState(false);
+
+  const calcShouldRenderVertical = useCallback(() => {
+    const raf = requestAnimationFrame(
+      () => scrollbarWrapRef.current && setShouldRenderVertical(scrollbarWrapRef.current.scrollHeight !== scrollbarWrapRef.current.clientHeight),
+    );
+
+    return () => cancelAnimationFrame(raf);
+  }, [scrollbarWrapRef.current, setShouldRenderVertical, textSize]);
+
+  const calcShouldRenderHorizontal = useCallback(() => {
+    const raf = requestAnimationFrame(
+      () => scrollbarWrapRef.current && setShouldRenderHorizontal(scrollbarWrapRef.current.scrollWidth > scrollbarWrapRef.current.clientWidth),
+    );
+
+    return () => cancelAnimationFrame(raf);
+  }, [scrollbarWrapRef.current, setShouldRenderHorizontal, textSize]);
+
+  useEffect(calcShouldRenderVertical, [height, calcShouldRenderVertical, textSize]);
+  useEffect(calcShouldRenderHorizontal, [width, calcShouldRenderHorizontal, textSize]);
+
+  useEffect(() => {
+    if (!scrollbarWrapRef.current) return;
+
+    const observer = new ResizeObserver(() => {
+      if (!scrollbarWrapRef.current) return;
+
+      let [oldHeight, oldWidth] = [scrollbarWrapRef.current.scrollHeight, scrollbarWrapRef.current.scrollWidth];
+
+      const rerender = () => {
+        calcShouldRenderVertical();
+        calcShouldRenderHorizontal();
+
+        if (!scrollbarWrapRef.current) return;
+
+        if (oldHeight !== scrollbarWrapRef.current.scrollHeight || oldWidth !== scrollbarWrapRef.current.scrollWidth) {
+          oldHeight = scrollbarWrapRef.current.scrollHeight;
+          oldWidth = scrollbarWrapRef.current.scrollWidth;
+
+          setTimeout(rerender, 50);
+        }
+      };
+
+      setTimeout(rerender, 50);
+    });
+
+    observer.observe(scrollbarChildrenRef.current);
+
+    return () => observer.disconnect();
+  }, [scrollbarWrapRef.current, scrollbarChildrenRef.current, calcShouldRenderVertical, calcShouldRenderHorizontal, textSize]);
+
+  return { shouldRenderHorizontal, shouldRenderVertical };
+};

package/src/hooks/thumb.hook.ts

@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+
+const getPosition = (scrollPosition, thumbSize) => `calc(${100 * scrollPosition}% - ${scrollPosition * thumbSize}px)`;
+
+export const useThumbHook = (scrollbarWrapRef, thumbVerticalRef, thumbHorizontalRef) => {
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!scrollbarWrapRef.current) return;
+      if (thumbHorizontalRef.current) {
+        const maxScroll = scrollbarWrapRef.current.scrollWidth - scrollbarWrapRef.current.clientWidth;
+
+        thumbHorizontalRef.current.style.left = getPosition(scrollbarWrapRef.current.scrollLeft / maxScroll, thumbVerticalRef.current.clientWidth);
+      }
+      if (thumbVerticalRef.current) {
+        const maxScroll = scrollbarWrapRef.current.scrollHeight - scrollbarWrapRef.current.clientHeight;
+
+        thumbVerticalRef.current.style.top = getPosition(scrollbarWrapRef.current.scrollTop / maxScroll, thumbVerticalRef.current.clientHeight);
+      }
+    };
+
+    const ref = scrollbarWrapRef.current;
+
+    ref.addEventListener("scroll", handleScroll);
+
+    handleScroll();
+
+    return () => ref.removeEventListener("scroll", handleScroll);
+  }, [scrollbarWrapRef.current, thumbHorizontalRef.current, thumbVerticalRef.current]);
+};

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./Scrollbar";

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../../tsconfig.react.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "../../../globals.d.ts",
+    "../../../peer-modules.d.ts"
+  ],
+  "exclude": [
+    "dist",
+    "node_modules",
+    "src/**/*.stories.tsx"
+  ]
+}

package/dist/Scrollbar.styl

@@ -1,55 +0,0 @@
-.Scrollbar
-  --vne-scrollbar-color-vertical: var(--vne-color-disabled, rgba(255, 255, 255, 30%))
-  --vne-scrollbar-color-horizontal: var(--vne-color-disabled, rgba(255, 255, 255, 30%))
-  --vne-scrollbar-color-thumb: var(--vne-color-selected, rgba(255, 255, 255, 75%)) 
-
-  display: block
-  position: relative
-
-  &-wrap
-    scrollbar-width: none
-
-  &-scroll
-    position: absolute
-
-    transition: 1000ms
-
-    border-radius: s('round(down, min(calc(8 * 100vw / 3840), calc(8 * 100vh / 2160)), 1px)')
-    opacity: 0
-
-  &-thumb
-    position: absolute
-
-    background: var(--vne-scrollbar-color-thumb)
-    border-radius: s('round(down, min(calc(12 * 100vw / 3840), calc(12 * 100vh / 2160)), 1px)')
-
-  &-scroll_isVertical
-    right: s('round(down, min(calc(-24 * 100vw / 3840), calc(-24 * 100vh / 2160)), 1px)')
-    top: 0;
-    bottom: s('round(down, min(calc(36 * 100vw / 3840), calc(36 * 100vh / 2160)), 1px)')
-
-    width: s('round(down, min(calc(12 * 100vw / 3840), calc(12 * 100vh / 2160)), 1px)')
-
-    background: var(--vne-scrollbar-color-vertical)
-
-  &-thumb_isVertical
-    right: s('round(down, min(calc(-6 * 100vw / 3840), calc(-6 * 100vh / 2160)), 1px)')
-    width: s('round(down, min(calc(24 * 100vw / 3840), calc(24 * 100vh / 2160)), 1px)')
-    height: s('round(down, min(calc(96 * 100vw / 3840), calc(96 * 100vh / 2160)), 1px)')
-
-  &-scroll_isHorizontal
-    bottom: s('round(down, min(calc(-24 * 100vw / 3840), calc(-24 * 100vh / 2160)), 1px)')
-    left: 0;
-    right: s('round(down, min(calc(36 * 100vw / 3840), calc(36 * 100vh / 2160)), 1px)')
-
-    height: s('round(down, min(calc(12 * 100vw / 3840), calc(12 * 100vh / 2160)), 1px)')
-
-    background: var(--vne-scrollbar-color-horizontal)
-
-  &-thumb_isHorizontal
-    top: s('round(down, min(calc(-6 * 100vw / 3840), calc(-6 * 100vh / 2160)), 1px)')
-    width: s('round(down, min(calc(96 * 100vw / 3840), calc(96 * 100vh / 2160)), 1px)')
-    height: s('round(down, min(calc(24 * 100vw / 3840), calc(24 * 100vh / 2160)), 1px)')
-
-  &-scroll_isVisible
-    opacity: 1