feat(scrollbar): add zIndex api (#2687)

XiaoMi · Dec 5, 2023 · 2fa5ee5 · 2fa5ee5
1 parent d0b76ec
commit 2fa5ee5
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 1 deletion.
diff --git a/.changeset/good-jobs-vanish.md b/.changeset/good-jobs-vanish.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/scrollbar": minor
+---
+
+feat: add zIndex api
diff --git a/.changeset/old-falcons-lay.md b/.changeset/old-falcons-lay.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(scrollbar): add zIndex api
diff --git a/packages/ui/scrollbar/src/Scrollbar.tsx b/packages/ui/scrollbar/src/Scrollbar.tsx
@@ -26,6 +26,7 @@ export const Scrollbar = forwardRef<HTMLDivElement | null, ScrollbarProps>(
       className,
       children,
       style,
+      zIndex,
       innerRef,
       ...rest
     },
@@ -43,8 +44,11 @@ export const Scrollbar = forwardRef<HTMLDivElement | null, ScrollbarProps>(
     useEffect(() => {
       if (containerElement) {
         setPs(new PerfectScrollbar(containerElement))
+
+        // 动态设置滚动条 z-index
+        zIndex && containerElement.style.setProperty('--scrollbar-zIndex', String(zIndex))
       }
-    }, [containerElement])
+    }, [containerElement, zIndex])
 
     // 轴定制
     useEffect(() => {
@@ -148,6 +152,11 @@ export interface ScrollbarProps extends HiBaseHTMLProps<'div'>, ScrollbarEventPr
    * @default 'relative'
    */
   position?: ScrollbarPositionEnum
+  /**
+   * 设置滚动条 z-index
+   * @default 'auto'
+   */
+  zIndex?: number | string
   /**
    * 开启滚动的轴
    * @default 'both'

diff --git a/packages/ui/scrollbar/src/styles/scrollbar.scss b/packages/ui/scrollbar/src/styles/scrollbar.scss
@@ -4,6 +4,8 @@
 $prefix: '#{$component-prefix}-scrollbar' !default;
 
 .#{$prefix} {
+  --scrollbar-zIndex: 'auto';
+
   overflow: hidden;
   width: 100%;
   height: 100%;
@@ -94,4 +96,9 @@ $prefix: '#{$component-prefix}-scrollbar' !default;
       opacity: 0;
     }
   }
+
+  > .ps__thumb-y,
+  > .ps__thumb-x {
+    z-index: var(--scrollbar-zIndex);
+  }
 }