diff --git a/.changeset/good-jobs-vanish.md b/.changeset/good-jobs-vanish.md new file mode 100644 index 000000000..1b31347b5 --- /dev/null +++ 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 new file mode 100644 index 000000000..eb8030cfd --- /dev/null +++ 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 index 77bc50571..432b735af 100644 --- a/packages/ui/scrollbar/src/Scrollbar.tsx +++ b/packages/ui/scrollbar/src/Scrollbar.tsx @@ -26,6 +26,7 @@ export const Scrollbar = forwardRef( className, children, style, + zIndex, innerRef, ...rest }, @@ -43,8 +44,11 @@ export const Scrollbar = forwardRef( 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 index 87ed92613..9b1f704b5 100644 --- 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); + } }